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下 


排版 约定 
本 书 使 用 了 下 列 排版 约定 。 


。 楷体 
表示 新 术语 。 





。 等 宽 字 体 (constant width ) 





表示 程序 片段 ， 以 及 正文 中 出 现 的 变量 、 函 数 名 、 数 据 库 、 数 据 类 型 、 环 境 变 量 、 


和 关键 字 等 。 


。 加 粗 等 宽 字 体 (constant width bold) 
表示 应 该 由 用 户 输入 的 命令 或 其 他 文本 。 





。 等 宽 斜 体 (constant width italic) 
表示 应 该 由 用 户 输入 的 值 或 根据 上 下 文 确定 的 值 替 换 的 文本 。 


该 图 标 表示 提示 或 建议 。 


该 图 标 表示 一 般 注 记 。 





该 图 标 表示 警告 或 警示 。 
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本 书 适用 对 象 


本 书 不 是 一 本 技术 手册 ， 虽 然 书 中 使 用 了 大 量 的 代码 示例 ， 它 也 不 是 一 本 纯 理 论 图 书 ， 虽 
然 讲 “为 什么 这 么 做 ”的 部 分 和 讲 “ 怎 么 做 ”的 一 样 多 。 因 此 ， 本 书 既 不 适用 于 单纯 寻求 
技术 答案 的 开发 者 ， 也 不 适用 于 只 想 了 解 醒 概 信息 的 项 目 经 理 。 


本 书 适用 的 对 象 是 那些 想 从 更 宏观 的 角度 理解 前 端 开发 的 从 业 人 员 。 我 撰写 此 书 的 目的 在 
于 激励 和 鼓舞 开发 人 员 去 承担 起 前 端 架 构 师 的 职责 ， 以 及 力争 在 下 一 个 项 目 中 把 前 端 开发 
作为 头等 重要 的 任务 。 


本 书 也 同样 写 给 那些 具备 一 定 技术 头脑 ， 并 且 想 要 理解 当前 日 新 月 异 的 前 端 环 境 的 管理 
者 。 本 书 涵盖 了 可 以 把 项 目前 端 开发 水 平 提 升 到 全 新 高 度 的 多 种 工具 、 标 准 和 最 佳 实践 ， 
并 对 此 进行 了 有 力 的 论证 


使 用 代码 示例 


补充 材料 (代码 示例 、 练 习 等 ) 可 以 从 https://github.com/micahgodbolt/front-end-architecture 
下 载 。 


本 书 的 目的 是 要 帮 你 完成 工作 。 一 般 来 说 ， 如 果 本 书 提供 了 示例 代码 ， 你 可 以 把 它 用 在 你 
的 程序 或 文档 中 。 除 非 你 使 用 了 很 大 一 部 分 代码 ， 否 则 无 需 联系 我 们 获得 许可 。 比 如 , 用 
本 书 的 几 个 代码 片段 写 一 个 程序 就 无 需 获 得 许可 ， 销 售 或 分 发 O'Reilly 图 书 的 示例 光盘 则 
需要 获得 许可 ， 引 用 本 书 中 的 示例 代码 回答 问题 无 需 获得 许可 ， 将 书 中 大 量 的 代码 放 到 你 
的 产品 文档 中 则 需要 获得 许可 。 


我 们 很 希望 但 并 不 强制 要 求 你 在 引用 本 书 内 容 时 加 上 引用 说 明 。 引 用 说 明 一 般 包 括 书 名 、 
作者 、 出 版 社 和 ISBN。 比 如 : “Frontend Architecture for Desigm Systems by Micah Godbolt 
(O’Reilly). Copyright 2016 Micah Godbolt, 978-1-491-92678-9.” 




























































































如 果 你 觉得 自己 对 示例 代码 的 用 法 超出 了 上 述 许可 的 范围 ， 欢 迎 你 通过 permissions@ 
oreilly.com 与 我 们 联系 。 











Safari®? Books Online 
Safari Books Online (http:/www.safaribooksonline.com) 是 应 运 而 
4 Safar | 。 生 的 数字 图 书馆 。 它 同时 以 图 书 和 视频 的 形式 出 版 世界 顶级 技术 
和 商务 作家 的 专业 作品 。 
技术 专家 、 软 件 开 发 人 员 、Web 设计 师 、 商 务 人 士 和 创意 专家 等 ， 在 开展 调研 、 解 决 问 
题 、 学 习 和 认证 培训 时 ， 都 将 Safari Books Online 视 作 获取 资料 的 首选 渠道 。 
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对 于 组 织 团 体 、 政 府 机 构 和 个 人 ，Safari Books Online 提供 各 种 产品 组 合 和 灵活 的 定价 策略 。 

















用 户 可 通过 一 个 功能 完备 的 数据 库 检 索 系 统 访问 O’Reilly Media、Prentice Hall Professional、 


Addison-Wesley Professional、 Microsoft Press、 Sams、Que、Peachpit Press、Focal Press、 














Cisco Press、 John Wiley & Sons、 Syngress、 Morgan Kaufmann、 IBM Redbooks、Packt、 
Adobe Press、 FT Press、 Apress、 Manning、New Riders、McGraw-Hill、Jones & Bartlett、 
Course Technology 以 及 其 他 几 十 家 出 版 社 的 上 千 种 图 书 、 培 训 视频 和 正式 出 版 之 前 的 书 
稿 。 要 了 解 Safari Books Online 的 更 多 信息 ， 我 们 网 上 见 


联系 我 们 
请 把 对 本 书 的 评价 和 问题 发 给 出 版 社 。 
美国 : 

O’Reilly Media, Inc. 


1005 Gravenstein Highway North 
Sebastopol, CA 95472 



































中 国 : 
北京 市 西城 区 西直门 南大 街 2 号 成 铭 大 厦 C 座 807 室 (100035) 
奥 菜 利 技术 咨询 (北京) 有 限 公司 


O’Reilly 的 每 一 本 书 都 有 专属 网 页 ， 你 可 以 在 那儿 找到 本 书 的 相关 信息 ， 包 括 勘 误 表 、 示 
例 代码 以 及 其 他 信息 。 本 书 的 网 页 地 址 是 : 
http://shop.oreilly.com/product/0636920040156.do 








对 于 本 书 的 评论 和 技术 性 问题 ， 请 发 送 电子 邮件 到 : 


bookquestions@oreilly.com 














要 了 解 更 多 O'Reilly 图 书 、 培 训 课 程 、 会 议和 新 闻 的 信息 ， 请 访问 以 下 网 站 : 


http://www.oreilly.com 





我 们 在 Facebook 的 地 址 如 下 : 
http://facebook.com/oreilly 


请 关注 我 们 的 Twitter 动态 : 


http://twitter.com/oreillymedia 


我 们 的 YouTube 视频 地 址 如 下 : 


http://www.youtube.com/oreillymedia 
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电子 书 
p 电 子 版 。 


扫描 如 下 二 维 码 ， 即 可 购买 本 
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第 一 部 分 


引言 














Web 在 诞生 之 初 ， 形 态 其 实 是 比较 简单 的 。 这 里 的 “诞生 ” 指 的 是 20 世纪 90 年 代 初期 ， 
而 “简单 ” 指 的 是 一 个 网 站 能 把 自己 的 入 口 放 在 雅虎 导航 页 上 ， 并 且 访 问 者 计数 器 能 在 使 
用 表格 布局 并 且 满 屏 GIF 动 图 的 网 页 底部 不 停 地 闪烁 。 

















不 过 ， 这 的 确 是 那个 年 代 你 所 需要 的 一 切 。 只 要 你 能 给 webring' 带 来 流量 ， 所 有 的 网 站 管 
理 员 都 会 满意 。 那 些 网 站 管理 员 是 谁 呢 ? 没 错 ， 其 实 他 们 就 是 那些 域名 的 拥有 者 。 那 时 ， 
网 站 还 是 简单 的 存在 ， 管 理 员 就 是 它们 的 主人 。 这 些 人 习惯 性 地 使 用 混乱 的 HTML， 还 搞 
不 清楚 到 底 是 不 是 应 该 关注 新 出 现 的 层 登 样式 表 (CSS)， 甚 至 他 们 当中 大 多 数 人 已 经 把 
JavaScript 作为 过 时 的 东西 抛弃 了 。 








不 过 ， 正 如 所 有 的 媒介 一 样 ， 网 站 也 会 进化 。JavaScript 仍然 被 广泛 使 用 ，CSS 也 不 仅仅 
用 于 设置 页 面 的 字体 类 型 和 字体 颜色 。 网 站 的 管理 员 最 终 发 现 ， 他 们 走 到 了 一 个 十 字 路 
口 。 网 站 的 流量 在 持续 增长 ，Web 技术 也 在 持续 发 展 ( 比 如 透明 GIF 等 )。 有 太 多 的 新 事 
物 和 新 技术 需要 学 习 ， 有 太 多 的 工作 要 做 。 最 后 ， 网 站 管理 员 不 得 不 把 网 站 的 建设 进行 分 
工 。 一 方面 ， 他 们 很 喜欢 “网 站 正在 建设 中 ”这 个 标志 以 及 到 处 可 见 的 marquee 标签 ， 另 
一 方面 ，Perl 是 世界 上 最 好 的 语言 ， 毫 无 疑问 它 能 够 让 网 站 永 葆 生机。 











当 网 站 管理 员 聘 请 另 一 个 人 来 维护 他 们 珍贵 的 域名 时 ， 他 们 需要 决定 自己 是 继续 做 一 个 写 
各 种 <bLink> 标签 的 大 师 ， 然 后 雇用 写 Perl 脚本 的 新 手 ， 还 是 自己 去 学 习 Perl。 














注 1: webring， 也 称 网 络 环 ， 是 相互 连接 的 网 站 集合 ， 通 常 主题 是 教育 或 社交 ， 在 20 世纪 90 年 代 至 21 世 
纪 初 比较 盛行 ， 多 数 为 非 专 业 网 站 。 一 一 译 者 注 
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最 终 他 们 做 出 了 决定 ， 由 此 现代 的 Web 开发 团队 开始 成 型 ， 就 像 听 到 巨型 海螺 的 召唤 。 早 
期 的 网 站 管理 员 在 每 一 个 阶段 和 十 字 路 口 ， 都 会 发 现 他 们 自己 需要 专注 于 开发 过 程 中 一 个 
很 小 的 部 分 。 他 们 当中 有 些 人 会 专注 于 服务 器 提供 的 文件 服务 ， 有 些 人 想 提 高 查询 数据 库 
的 能 力 ， 而 另外 一 些 人 则 乐于 创作 各 种 图 形 和 图 像 。 


更 新 的 、 更 专业 的 角色 也 吸引 了 其 他 人 到 这 个 行业 ， 包 括 艺术 家 、 作 家 、 商 业 分 析 师 、 工 
程 师 、 数 学 家 等 。 随 着 这 些 角 色 的 发 展 ， 以 及 相关 的 人 员 越 来 越 成 熟 ，Web 开发 逐渐 催生 
了 一 系列 新 的 名 称 和 新 的 分 支 学 科 。 


那些 决策 者 

在 Web 开发 的 早期 ， 有 些 人 认为 网 页 中 的 文本 内 容 跟 设 计 、 代 码 甚至 搜索 引擎 优化 〈 众 所 
周知 ， 搜 索引 警 就 是 抓 取 页 面 中 的 关键 字 ) 一 样 重要 。 在 此 之 前 ， 网 页 内 容 往 往 是 被 放 到 
后 面 处 理 的 。“ 先 随便 填 一 些 lorem ipsum 字符 到 设计 稿 里 ， 赶 紧 做 后 面 的 。” 最 终 在 网 站 
上 线 之 前 ， 客 户 才 会 填 上 真实 、 优 质 、 受 启发 的 内 容 ， 并 且 一 直 以 来 都 是 如 此 。 


这 些 内 容 的 拥护 者 ， 终 于 坚定 直接 地 宣称 Web 的 本 质 就 是 内 容 ， 因 此 网 站 内 容 值得 我 们 花 
费时 间 和 精力 。 尽 管 这 是 一 场 恶 战 ， 不 过 他 们 开始 被 洲 请 参加 早期 的 规划 会 议 ， 偶 尔 也 被 
邀请 参与 编辑 策略 的 制定 。 他 们 不 断 取 得 进展 ! 虽然 这 个 过 程 困难 而 且 扳 独 ， 但 是 结果 是 
值得 的 。 


































































































就 这 样 ， 他 们 作为 开拓 者 在 孤独 地 前 进 。 直 到 关键 的 一 天 ， 他 们 碰巧 遇 到 另外 一 个 同样 拥 
护 内 容 的 人 ， 才 意识 到 原来 他 们 不 是 在 白 军 作战 。 友 谊 的 星火 以 煤 原 之 势 发 展 成 方方面面 
的 合作 ， 最 终 他 们 成 立 了 社区 ， 继 续 致 力 于 向 人 们 宣传 网 站 内 容 的 重要 性 。 


很 多 年 过 去 了 ,但 是 关于 网 站 内 容 的 争论 远 远 没有 结束 。 即 使 多 一 个 设计 师 被 要 求 在 主页 
上 “随便 填充 点 内 容 ”， 我 们 也 能 马上 了 听 到 远 处 抗议 的 呐喊 声 。2008 年 12 月 16 日 ，Kristina 
Halvorson 在 A List Apart 博客 (http://alistapart.com/article/thedisciplineofcontentstrategy) 上 站 
出 来 发 声 ， 举 起 了 内 容 策略 的 大 族 。 她 要 求 我 们 传播 这 种 理念 ,“ 要 把 网 站 内 容 作 为 一 个 
值得 做 出 战略 规划 和 有 投资 价值 的 关键 元 素来 对 待 "。 其 他 内 容 策略 的 践 行者 们 开始 学 习 、 
使 用 和 推广 它 ， 成 为 了 内 容 策略 师 。 由 此 ， 一 个 新 的 分 支 学 科 诞生 了 。 












































Kristina 的 文章 并 不 是 最 早 提出 内 容 策略 这 个 概念 的 ， 却 是 最 早 定义 出 内 容 策略 的 核心 、 
精神 和 目标 的 。 一 夜 之 间 ， 内 容 拥 护 者 们 的 共同 诉求 被 赋予 了 一 个 名 字 。 他 们 即将 迎 来 一 
个 新 的 时 代 ， 博 客 、 播 客 和 会 议 都 围绕 着 一 个 简单 的 观点 来 讨论 一 一 “内 容 很 重要 ”。 








注 2: lorem ipsum， 中 文 又 称 “ 乱 数 假 文 ， 是 指 一 篇 常用 于 排版 设计 领域 的 拉丁 文 文章 ， 主 要 的 目的 为 测 
试 文章 或 文字 在 不 同 字 型 、 版 型 下 的 效果 。 一 一 译 者 注 
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响应 式 Web 的 出 现 


与 此 同时 ， 一 个 身 着 黑色 高 领 毛衣 的 男人 出 现 了 ， 并 且 苏 覆 了 人 们 对 互联 网 接 入 设备 的 理 
解 。 在 Web 历史 上 ， 我 们 第 一 次 被 迫 接 受 这 人 么 一 个 事实 : 人 们 并 不 是 只 有 坐 在 舒适 的 办 
公 室 或 起 居室 ， 使 用 高 速 的 宽带 网 络 ， 对 着 分 辩 率 为 1024 像素 x 768 像素 的 电脑 屏幕 时 ， 
才 会 去 浏览 网 站 。iPhone 的 出 现 ， 使 人 们 迎 来 了 一 个 多 分 辨 率 、 多 功能 、 连 接 速 度 不 稳定 
以 及 多 种 输入 模式 的 多 终端 时 代 。 作 为 开发 者 ， 我 们 不 能 再 对 用 户 和 他 们 用 来 浏览 网 站 的 
设备 做 出 任何 假设 。 


为 此 ， 我 们 尝试 过 很 多 解决 方法 。 我 们 尝试 使 用 双 指 缩放 、 双 击 缩放 、 直 接 显示 原 网 站 ， 
或 者 把 移动 设备 重 定向 到 一 个 精简 的 便于 移动 浏览 的 “m.dot” 网 站 。 然 而 ， 没 有 一 个 方案 
能 够 真正 解决 问题 。 双 指 缩放 的 操作 不 便于 导航 ， 尤 其 对 于 购买 商品 或 注册 服务 ， 而 且 增 
加 移动 流量 意味 着 损失 收益 。 昌 然 m. 网 站 对 移动 设备 更 加 友好 ， 但 是 这 样 就 要 求 开 发 团 
队 去 维护 两 个 独立 的 网 站 。 






























































很 多 m. 网 站 被 冷落 了 ， 它 们 也 很 难 和 PC 版 主 站 保持 同步 更 新 ， 或 者 部 分 功能 缺失 而 迫使 
用 户 切换 到 桌面 设备 ， 来 做 一 些 比 获得 指引 或 者 打 个 电话 更 复杂 的 事情 。 我 们 必须 做 出 一 
些 改变 。 虽 然 有 些 人 觉得 iPhone 已 经 过 时 ,但 是 很 明显 ，Web 世界 的 未 来 在 移动 设备 上 。 











2010 年 5 月 25 日 ，iPhone 发 布 3 年 后 ，Ethan Marcotte 在 A List Apart 上 发 表 了 一 篇 题 为 
“Responsive Web Design” 的 长 文 (http://alistapart.com/article/responsive-web-design)。 这 篇 
文章 并 没有 介绍 新 的 学 科 知 识 ， 也 没有 打出 口号 ， 让 困境 中 的 开发 者 聚集 起 来 ， 而 是 描述 
了 一 种 创建 新 型 网 站 的 方式 ， 这 些 网 站 可 以 根据 用 户 访问 设备 的 尺寸 来 做 出 响应 ， 并 且 调 
节 自 身 大 小 来 适 配 对 应 的 视 口 。 响 应 式 Web 设计 (responsive Web design，RWD) 不 是 一 
种 新 科技 ， 而 是 现 有 工具 和 技术 的 一 个 集合 ， 包 括 以 下 内 容 。 




















流 式 网 格 
用 基于 百分比 的 宽度 代替 固定 像素 的 尺寸 。 








自 适 应 图 片 
用 100% 宽度 的 图 片 填充 它们 的 容器 ， 并 且 随 着 视 口 大 小 的 改变 而 改变 。 


媒体 查询 
允许 对 不 同 的 视 口 大 小 使 用 不 同 的 样式 ， 我 们 现在 可 以 基于 屏幕 的 大 小 来 改变 页 面 布局 。 











在 Ethan 发 表 这 篇 文章 的 几 年 之 前 ， 所 有 的 这 些 技术 其 实 早 就 可 以 在 浏览 器 中 使 用 。 不 过 ， 
正如 Kristina 为 内 容 策 略 发 起 的 号 召 ，Ethan 对 RWD 的 描述 清晰 地 定义 了 每 个 人 都 在 迫切 
寻找 的 解决 方案 。 


一 篇 简单 的 文章 ， 使 Web 开发 这 个 行业 发 生 了 变化 。 
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前 端 架 构 的 种 子 

根据 这 段 历史 , 我 开始 思考 什么 是 前 端 架构 。 作 为 一 个 Drupal 的 前 端 开 发 人 员 ”, 我 对 那些 
内 容 战 略 家 过 去 所 面临 的 窘境 感同身受 。 编 写 前 端 样式 总 是 作为 延 后 的 事情 来 考虑 ， 它 是 
在 设计 师 和 后 端 开发 人 员 完 成 工作 之 后 ， 再 给 默认 的 标记 加 上 一 层 漂亮 的 外 表 。 对 于 我 们 
所 面临 的 挑战 ,没有 什么 比 不 同 角色 进入 项 目的 先后 顺序 更 能 说 明 问 题 。 我 见 过 一 些 项 目 
在 启动 之 后 ， 先 是 讨论 设计 方案 ， 然 后 开发 功能 ， 最 后 才 把 前 端 开 发 人 员 加 入 到 项 目 中 ， 
让 他 们 把 设计 师 扔 过 来 的 各 种 设计 实现 成 CMS 输出 的 标记 。 


经 历 了 几 次 这 样 的 流程 之 后 ， 我 知道 当 我 尝试 去 解构 那 一 堆 移动 端 和 桌面 端的 设计 稿 时 ， 
我 将 会 非常 痛 若 。 这 样 做 的 目标 是 把 它们 制作 成 一 个 主题 ， 应 用 到 Drupal 输出 的 一 堆 div 
标签 上 。 跟 一 些 使 用 Rails 的 朋友 谈 及 编写 网 站 导航 样式 所 面临 的 挑战 时 ， 我 迫不及待 地 
承认 ,“ 开 发 者 不 愿意 对 导航 的 标记 进行 哪怕 是 一 点 点 的 修改 ”， 而 事实 的 确 如 此 ! 一 旦 这 
些 标记 被 定 下 来 ， 开 发 人 员 马 上 就 会 进入 到 下 一 个 任务 ， 这 时 候 如 有 果 想 修改 一 下 div、 列 
表 或 者 链接 ， 那 简直 是 痴心 妄想 。 毫 无 疑问 ， 这 将 会 产生 一 些 奇 怪 的 CSS hack 去 实现 某 
些 设计 ， 而 这 些 设计 往往 都 难以 跟 实际 生产 环境 中 的 默认 导航 标记 相 匹 配 。 


多 年 以 来 ， 前 端 开 发 人 员 的 价值 体现 在 创建 弗 兰 肯 斯 坦 风 格 的 设计 模式 的 能 力 上 。“ 现 在， 
如 果 我 给 第 三 层 先 套 的 div 添加 一 个 伪 元 素 ， 并 且 给 它 设置 一 个 雪碧 图 的 背景 图 ……”， 这 
是 我 们 的 技术 方案 ， 它 很 精 料 。 我 们 一 直 在 填 坑 ， 还 奢望 能 够 赶 在 技术 债务 把 我 们 拖 垮 之 
前 把 网 站 发 布 出 去 。 


随 着 项 目 复杂 性 的 增长 ， 这 样 的 流程 不 是 长 久之 计 。 所 以 ， 我 开始 思考 ， 如 果 不 再 使 用 传 
统 的 方式 去 开发 (因为 以 前 这 种 方法 一 直 都 是 可 行 的 )， 而 是 把 前 端 开发 当 作 “一 个 值得 
做 出 成 略 规划 和 有 投资 价值 的 关键 元 素 "， 会 使 项 目 产生 什么 样 的 变化 。 如 果 我 们 在 CSS 
框架 、 文 档 工具 、 构 建 流 程 的 命名 规范 ， 其 至 标记 本 身 这 些 方面 拥有 话语 权 会 怎样 ?我 开 
始 思索 如 果 是 UX 开发 去 主导 后 端 开 发 ， 而 不 是 反 过 来 ， 那 么 一 个 大 规模 项 目 会 变 成 什么 
样子 。 


这 样 能 引起 一 场 变革 吗 ? 其 他 人 愿意 跟随 并 开始 “学 习 、 使 用 和 推广 它 ” 吗 ? 在 形成 一 股 
力量 之 前 ， 我 们 需要 了 解 目标 。 我 们 争取 的 是 什么 ? 我 们 怎样 实现 目标 ? 我 们 会 被 赋予 什 
么 样 的 称呼 ? 


= LL A 用 
前 端 架 构 师 的 含义 
在 后 端 开 发 领域 ， 系 统 规 划 和 可 扩展 性 非常 关键 ， 因 此 软件 架构 师 备 受 重视 。 早 在 开发 工 
作 局 动 之 前 ， 他 们 就 被 邀请 加 入 到 项 目 中 ， 而 且 他 们 会 跟 客户 讨论 即将 建成 的 平台 的 架构 






































































































































注 3: Drupal 是 一 个 由 Dries Buytaert 创立 的 自由 开源 的 内 容 管 理 系统 ， 用 PHP 语言 写成 。 一 一 译 者 注 
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要 求 。 他 们 将 会 使 用 什么 技术 栈 ? 内 容 类 型 是 什么 ?这 些 内 容 如 何 被 创建 、 保 存 以 及 展示 
在 屏幕 上 ? 软件 架构 师 的 职责 就 是 要 保证 项 目 中 每 一 步 都 在 总 体 架 构 的 指导 下 进行 ， 而 不 
会 随机 决定 。 


我 意识 到 前 端 开 发 领域 缺少 的 就 是 架构 。 我 们 总 是 被 要 求 做 一 些 零 碎 的 工作 ， 而 且 优 先 级 
也 不 高 。 我 没 用 多 长 时 间 就 从 数据 库 和 Web 服务 器 切换 到 Sass 文件 夹 结 构 和 构建 系统 ， 
因此 前 端 架 构 师 的 头衔 就 这 样 诞生 了 。 


现在 ， 任 何 一 个 职位 名 称 都 需要 一 个 职位 描述 。 前 端 架 构 师 是 做 什么 的 呢 ? 如 果 有 合适 的 
机 会 ， 他 们 会 对 项 目 产 生 什么 样 的 影响 ?这 些 思 考 促使 我 在 公司 年 会 上 做 了 一 场 关于 前 端 
架构 的 简短 演讲 。 另 外 ， 在 CSS 开发 者 大 会 上 的 发 言 机 会 也 让 我 将 想法 认真 总 结 成 了 一 个 
精简 的 45 分 钟 演示 。 


2014 年 10 月 13 日 ， 在 新 奥尔良 会 议 中 心 一 个 拥挤 的 房间 里 ,“ 举 起 前 端 架构 的 旗帜 ”成 
了 在 一 线 奋 斗 着 的 开发 者 们 共同 的 诉求 。 我 希望 他 们 知道 ， 他 们 不 是 孤军 作战 ， 有 很 多 人 
在 支持 他 们 。 我 跟 项 目 经 理 、 销 售 人 员 和 开发 者 沟通 ， 给 他 们 描绘 拥有 良好 前 端 架 构 的 意 
义 ， 以 及 它 为 团队 和 客户 带 来 的 价值 。 



























































在 这 次 演讲 之 后 ， 我 听 到 了 很 多 故事 ， 都 是 关于 那些 终于 弄 清 楚 自 身 定位 以 及 在 公司 中 所 
扮演 的 角色 的 开发 者 们 的 。 很 多 人 现在 才 发 现 ， 其 实 他 们 一 直 扮 演 着 前 端 架构 师 的 角色 ， 
却 从 来 没有 拥有 过 这 个 头衔 ,或 者 没有 足够 的 信心 去 争取 这 个 职位 所 应 具有 的 权力 。 在 
CSS 开发 者 大 会 召开 几 周 之 后 ， 我 发 现 很 多 人 把 他 们 在 Twitter 上 的 个 人 简介 改 成 了 “前 
端 架构 师 ”。 而 我 ， 作 为 他 们 中 的 一 员 ， 从 那 以 后 ， 就 在 这 条 路 上 坚定 地 走 下 去 了 。 不 管 
我 现在 的 工作 头衔 是 什么 ， 我 都 是 一 名 前 端 架 构 师 。 
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第 1 章 


前 端 染 构 原 则 





前 端 架 构 是 一 系列 工具 和 流程 的 集合 ， 则 在 提升 前 端 代 码 的 质量 ， 并 实现 高 效 、 
可 持续 的 工作 流 。 

当 思 考 前 端 架 构 师 的 角色 时 ， 我 总 会 联想 到 传统 的 建筑 设计 师 。 

在 建设 过 程 中 ， 建 筑 设计 师 需 要 设计 和 规划 方案 ， 并 且 跟 进 施工 过 程 。 这 与 前 端 架 构 师 的 

工作 有 着 异曲同工 之 妙 ， 不 同 的 是 后 者 建造 的 是 网 站 ， 而 不 是 建筑 物 。 比 起 浇筑 混凝土 ， 

建筑 设计 师 会 在 设计 工程 构图 的 工作 上 倾注 更 多 的 精力 。 同 理 ， 相 比 编写 具体 的 代码 ， 前 

端 架 构 师 更 专注 于 开发 工具 和 优化 流程 。 























下 面 ， 我 们 来 深入 分 析 前 端 架构 师 的 工作 职责 。 











体系 设计 
试想 一 下 ， 如 果 一 栋 建 筑 没 有 明确 的 构造 设计 ， 所 有 的 重要 事项 都 由 建筑 工人 直接 决 
定 ， 那 么 就 可 能 会 出 现 这 样 的 情景 : 第 一 面 墙 用 石头 至 ， 第 二 面 墙 用 砖头 砌 ， 第 三 面 墙 
用 木头 拱 ， 第 四 面 墙 因 为 追求 时 化 而 留 空 。 

















虽然 网 站 的 整体 外 观 和 风格 基调 完全 由 经 验 丰富 的 视觉 设计 师 决 定 ， 但 前 端 架 构 师 掌控 
着 背后 的 前 端 开 发 方法 和 系统 设计 哲学 。 通 过 设计 所 有 前 端 开发 人 员 都 要 遵循 的 系统 规 
范 ， 前 端 架 构 师 清晰 描绘 了 产品 和 代码 的 最 终 形 态 。 

一 旦 前 端 架 构 师 建立 起 了 系统 设计 的 规范 ， 项 目 就 拥有 了 可 以 衡量 代码 质量 的 标准 ， 否 
则 我 们 如 何 判断 代码 是 否 达 标 呢 ? 一 个 精心 设计 的 系统 ， 应 当 具 备 完 善 的 检验 机 制 ， 并 
做 出 适当 的 取舍 ， 以 保证 系统 中 的 代码 有 实质 的 价值 ， 而 不 是 简单 的 堆砌 。 
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工作 规划 





有 了 清晰 的 结构 设计 之 后 ， 就 需要 制定 开发 工作 流 了 。 开 发 人 员 写 一 行 代码 并 且 提 交 
到 线 上 需要 经 过 什么 步骤 ? 举 一 个 最 简单 的 例子 ， 这 个 过 程 包括 使 用 FTP 登录 服务 器 ， 
修改 一 个 文件 并 保存 。 然 而 ， 对 于 大 多 数 项 目 而 言 ， 完 整 的 工作 流 可 能 会 用 到 多 种 工 
具 ， 如 版 本 控制 器 、 任 务 调度 器 、CSS 人 处理 器 、 文 档 工具 、 测 试 组 件 和 服务 器 自动 化 工 
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前 端 架构 师 的 目标 是 设计 出 能 流畅 运转 的 系统 。 这 个 系统 不 仅 能 高 效 快速 地 启动 ， 还 可 
以 通过 语言 分 析 、 测 试用 例 、 文 档 记 录 等 方法 持续 地 提供 有 效 的 反馈 ， 并 且 大 幅 减少 由 
于 重复 操作 而 产生 的 人 为 错误 。 


监督 跟 进 





前 端 架 构 设 计 绝 不 是 一 劳 永 逸 的 工作 。 没 有 任何 设计 在 一 开始 就 是 完美 的 ， 也 没有 任何 
计划 可 以 一 步 到 位 。 客 户 和 开发 人 员 的 需求 会 随 着 时 间 改 变 。 在 某 个 阶段 运行 得 很 好 的 
开发 流程 ， 随 后 也 可 能 需要 重新 调整 ， 以 便 提 高 效率 、 减 少 错误 。 

前 端 架构 师 的 一 个 非常 重要 的 能 力 ， 就 是 能 够 持续 地 优化 工作 流程 。 如 今 各 种 各 样 的 构 
建 工具 可 以 让 我 们 很 方便 地 改变 工作 方式 ， 并 通知 到 每 一 位 开发 人 员 。 

有 些 人 问 前 端 架构 师 是 否 等 同 于 管理 角色 ， 不 再 需要 写 业 务 代 码 。 我 以 过 来 人 的 身份 向 
你 保证 ， 前 端 架构 师 不 仅 要 写 更 多 代码 ， 更 要 会 用 多 种 编程 语言 ， 还 要 使 用 大 量 的 工 
具 。 代 码 量 并 未 减少 ， 只 是 代码 的 读者 发 生 了 改变 。 前 端 开 发 人 员 面 向 终端 用 户 写 代 
码 ， 而 前 端 架构 师 面向 的 则 是 团队 里 的 开发 人 员 。 


像 盖 房子 一 样 拱 建站 点 



































糕 的 是 ， 你 只 是 被 党 无 到 


火 如 茶 地 进行 了 几 个 月 ， 





























前 端 架 构 需 要 争夺 属于 自己 的 优先 权 ， 正 如 我 们 很 难 想象 有 人 会 在 不 咨询 建筑 师 的 前 提 
下 ， 就 建造 一 座 摩 天 大 厦 。 但 事实 上 ， 很 多 大 型 的 网 站 项 目 就 是 这 么 直接 开始 的 。 


借口 数不胜数 :“ 我 们 预算 不 够 了 “ 哪 有 时 间 做 这 个 ”“ 等 设计 做 完了 再 说 吧 ”， 甚至 更 粳 














由 地 突然 空降 到 项 目 组 一 一 所 有 的 设计 已 经 定稿 ， 开 发 工作 也 如 
而 你 只 有 几 个 月 的 时 间 把 别人 扎 过 来 的 一 堆 设 计 稿 奇迹 般 地 且 完 








美 地 实现 成 一 个 个 的 网 页 。 这 当然 不 可 能 开发 出 实用 性 强 、 可 扩展 且 稳 定 强大 的 网 站 。 


作为 前 端 架 构 师 ， 我 们 认为 有 多 个 关键 的 决策 需要 在 项 目 启动 之 初 就 制定 下 来 。 如 有 果 等 到 


开发 阶段 的 后 期 再 考虑 ， 








不 是 已 经 用 不 上 了 ， 就 是 一 开始 错误 的 决定 已 经 造成 了 无 法 挽回 





的 损失 。 一 旦 做 出 这 些 决策 ， 我 们 的 任务 就 是 去 辅助 视觉 设计 、 平 台 开 发 、 底 层 结构 ， 使 
之 能 最 大 程度 地 满足 需求 。 


如 果 没 有 前 端 架构 师 的 提前 介入 ， 项 目 就 有 可 能 陷入 两 难 境地 : 或 是 将 视觉 设计 、 平 台 或 
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底层 结构 推翻 重 做 ,或 是 让 前 端 开发 人 员 自 己 去 克服 困难 。 经 验 告 诉 我 ， 推 翻 重 做 通常 不 
会 有 什么 好 结果 。 


有 什么 难题 
我 知道 ， 这 不 是 一 个 轻松 的 任务 。 我 所 提议 的 改变 需要 耗费 不 少 的 成 本 ， 而 且 任 何 一 个 负 
责 做 这 些 决 定 的 人 都 需要 权衡 各 种 利弊 。 对 于 那些 没有 与 前 端 架 构 师 一 起 工作 过 的 人 来 
说 ， 这 将 会 存在 很 大 的 风险 。 


正如 人们 和 争论 “ 先 有 鸡 还 是 先 有 蛋 ” 的 问题 ， 我 们 面临 的 窘境 是 ， 如 果 要 说 服 老板 们 为 一 
个 完善 的 前 端 架构 系统 花费 时 间 和 人 金钱， 他 们 往往 会 要 求 提供 这 种 架构 的 成 功 案 例 ， 而 这 
显然 需要 你 曾经 参与 过 类 似 的 项 目 。 问 题 是 ， 如 果 你 总 是 被 要 求证 明 这 种 工作 流程 是 有 效 
的 ， 又 怎么 会 有 机 会 去 实际 地 为 某 个 项 目 设计 前 端 架构 呢 ? 


对 于 我 和 这 本 书 来 说， 很 地 运 ， 我 最 近 被 委 以 重任 ， 为 一 个 大 型 的 网 站 建立 新 的 架构 系 
统 。 我 有 充足 的 时 间 思 考 和 规划 这 个 新 系统 ， 并 制定 新 的 代码 标准 、 工 具 和 开发 流程 。 一 
旦 这 个 项 目 开始 成 形 ， 我 就 得 到 了 一 个 很 可 贵 的 机 会 ， 去 证 明 合 适 的 架构 设计 有 多 么 强大 
的 可 扩展 性 和 可 持续 性 。 
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第 2 章 


Alpha 项 目 





在 过 去 的 一 年 里 ， 我 有 幸 以 架构 师 的 身份 参与 了 Red Hat 公司 的 一 个 项 目 ， 该 项 目 希 望 将 
已 有 的 网 站 组 件 共享 到 公司 的 多 个 网 站 中 。 在 构建 Redhat.com 一 段 时 间 之 后 ， 我 知道 自己 
还 是 面临 很 多 挑战 。 我 花 了 一 些 时 间 建 立 起 开发 团队 对 我 的 信任 ， 最 终 得 以 全 权 人 负责 整个 
项 目的 架构 。 


这 个 机 会 非常 难得 ， 因 为 有 了 它 ， 我 们 才能 解决 “ 先 有 鸡 还 是 先 有 蛋 ” 的 问题 。 我 的 团队 
有 机 会 去 搭建 一 个 庞大 的 、 有 足够 技术 支撑 的 设计 方案 ， 并 且 整 个 方案 最 终 会 被 展现 在 一 
个 流量 很 大 的 站 点 中 。 这 将 会 成 为 一 个 标志 性 的 项 目 ， 能 够 让 我 在 后 续 其 他 项 目 中 推广 前 


端 架构 设计 的 理念 。 


2.1 慢 而 有 力 的 开端 

能 够 在 这 个 时 候 与 Red Hat 公司 合作 ， 我 的 团队 实在 是 太 季 运 了 。 我 们 对 旧 站 点 进行 了 重 
新 设计 之 后 ， 并 设 有 马上 着 手 开发 新 功能 。 虽 然 我 们 时 不 时 也 需要 处 理 一 下 bug， 但 毕竟 
还 是 有 几 个 月 的 时 间 去 研究 如 何 为 这 个 系统 设计 全 新 的 架构 。 




































































尽管 在 Redhat.com 生产 环境 中 仍然 有 大 量 的 遗留 代码 ， 我 们 还 是 选择 了 从 零 开始 。 因 为 
原来 的 站 点 是 基于 块 (一 行 接 一 行 的 独立 内 容 ) 设计 的 ， 所 以 我 们 新 开发 的 网 页 元 素 可 以 
布局 在 已 有 内 容 块 的 上 方 或 下 方 。 我 们 不 需要 重 写 侧 边栏 的 样式 ， 也 不 需要 频繁 地 改变 
HTML 标签 的 样式 。 实 际 上 ， 我 们 相当 于 在 旧 站 点 中 构建 全 新 的 网 站 。 正 如 船上 的 甲板 可 
以 一 块 一 块 地 被 奉 代 ， 我 们 希望 最 终 也 可 以 替换 原 有 的 系统 ， 完 全 使 用 新 的 系统 。 


既然 自由 发 挥 的 空间 这 么 大 ， 我 们 完全 可 以 创建 一 张 很 长 的 愿望 清单 ， 并 且 真 的 去 实现 它 
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们 。 这 个 愿望 清单 包括 以 下 方面 。 











模块 化 内 容 
我 们 非常 推崇 Brad Frost 提出 的 原子 设计 方法 论 (http:/patternlab.io) ， 和 希望 尽 可 能 复 用 
小 的 组 件 ， 而 不 是 弄 出 几 十 个 、 甚 至 上 百 个 不 同 的 内 容 块 。 





全 面 测试 
我 们 之 前 经 常 出 现 这 样 的 情况 ， 大 量 的 前 端 代码 合 入 到 主干 ， 然 后 导致 几 个 月 前 的 代码 
出 现 运 行 问题 。 这 样 太 浪费 时 间 了 ， 所 以 我 们 决定 要 像 测试 后 端 代码 一 样 测试 我 们 的 新 
框架 ， 达 到 一 样 的 代码 覆盖 水 平 。 








流 式 处 理 
我 们 希望 引入 Git 工作 流程 ， 用 它 来 管理 应 用 代码 简直 是 游 坟 有 余 ， 但 是 我 们 要 将 功能 
分 支 分 解 为 更 小 的 、 模 块 化 的 代码 块 。 另 外 ， 也 要 把 过 去 一 直 采 用 的 容易 出 错 的 手动 步 
又 自动 化 : 更 新 样式 表 、 创 建 图 标 字 体 、 部 署 新 代码 等 。 




















详细 的 文档 
这 个 新 系统 的 受众 很 广 ， 包 括 前 端 开发 人 员 、 后 端 开发 人 员 、 设 计 师 、 市 场 经 理 、 运 维 
人 员 ， 以 及 其 他 产品 开发 角色 。 我 们 希望 每 个 人 接触 这 套 系 统 时 ， 都 能 找到 适合 自己 
的 、 详 细 的 文档 。 


这 四 个 方面 需要 一 点 时 间 去 开发 、 配 置 和 完善 。 在 最 初 儿 个 月 里 ， 我 们 的 开发 效率 确实 不 
如 以 前 。 但 是 一 旦 新 系统 有 了 一 定 的 基础 ， 我 们 很 快 就 感受 到 了 它 的 优势 。 








中 




















当 再 次 遇 到 包含 2 个， 其 至 多 达 12 个 内 容 块 的 页 面 需 求 时 ， 我 们 发 现 工作 量 比 以 前 少 得 
多 。 我 们 不 再 需要 独立 对 待 每 一 个 内 容 块 ， 而 是 将 内 容 块 拆 分 为 最 小 的 独立 可 重用 组 件 ， 
并 根据 需求 决定 是 否 新 增 布局 或 组 件 。 

















最 终 ， 每 一 个 需求 都 会 产 出 详尽 的 文档 、 全 面 的 回归 测试 方案 以 及 符合 最 初 架构 设计 规范 
的 源 代码 。 





虽然 这 些 工 具 和 流程 需要 一 些 时 间 来 打造 ， 但 是 效果 实在 太 好 了 ， 现 在 我 们 已 经 开始 嘲笑 
自己 的 工作 有 多 么 简单 了 。 当 然 ， 工 作 简单 是 好 事 ， 这 意味 着 我 们 可 以 少 做 一 些 重复 的 工 
作 ， 把 更 多 时 间 花 在 系统 设计 上 。 最 终 ， 在 我 们 设计 的 系统 中 工作 会 感到 愉悦 ， 面 对 每 一 
个 用 户 需求 ， 我 们 都 会 感到 兴奋 ， 因 为 又 有 机 会 将 系统 变 得 更 强大 了 。 


豆 || 二 上 半 士 
2.2 全 副 武装 
有 了 这 些 经 验 后 ， 我 相信 我 们 编写 的 代码 、 开 发 的 流程 、 磨 练 的 技术 能 够 充分 验证 这 套 方 
法 论 的 合理 性 ， 并 成 为 说 服 其 他 人 在 项 目 中 使 用 它 的 坚实 基础 。 
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使 用 本 书 提 到 的 流程 、 技 术 和 书 中 讨论 的 经 验 ， 我 希望 你 在 下 一 个 项 目 中 能 够 有 自信 为 自 
己 的 前 端 架构 而 战 。 和 争取 尽早 参与 项 目 ， 以 能 够 在 项 目的 重要 决策 中 发 挥 影响 力 ， 挑 战 现 
有 的 工具 和 流程 ， 构 建 更 智能 、 可 重用 性 更 高 的 代码 ， 和 争取 使 你 的 前 端 工 作 产 生 更 大 的 影 
响 力 。 手 起 前 端 架 构 师 的 旗帜 ， 和 我 一 起 战斗 吧 ! 
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任何 一 栋 建 筑 都 需要 稳固 的 基础 、 四 面 墙 体 和 一 个 屋顶 。 这 些 要 素 都 是 必 不 可 少 的 。 基 础 
支撑 着 墙 体 ， 墙 体 支 撑 着 屋顶 ， 而 屋顶 保证 你 安全 并 且 免 受 风 吹 雨 淋 之 苦 。 如 果 一 名 建筑 
师 不 能 提供 上 述 要 素 ， 那 么 他 必定 是 不 称职 的 。 作 为 前 端 架 构 师 ， 我 们 在 构建 新 网 站 时 也 
承担 着 相似 的 责任 。 我 们 必须 驾驭 必要 的 工具 和 流程 ， 而 这 两 者 正 是 成 功 构 建 网 站 的 要 素 。 


3.1 围绕 四 个 核心 工作 


本 书 接 下 来 将 讨论 前 端 架构 的 四 个 核心 。 这 四 个 核心 的 主题 、 技 术 和 实践 是 构建 可 扩展 和 
可 持续 优化 的 系统 的 基础 。 它 们 引发 了 在 任何 前 端 开 发 项 目 中 都 需要 进行 的 一 系列 讨论 。 
这 些 讨 论 会 帮助 我 们 确立 对 项 目的 整体 期 望 ， 包 括 代 码 质量 、 实 现 每 一 项 需求 所 需 的 时 间 
和 工作 量 ， 以 及 保证 所 有 开发 工作 能 够 按时 完成 的 工作 流 。 


当然 ， 本 书 所 探讨 的 四 个 核心 绝 不 是 唯一 的 方法 ， 其 至 都 算 不 上 最 好 的 方法 。 每 一 个 决定 
都 应 该 视 项 目的 实际 情况 而 定 ， 有 时 候 最 好 的 决定 甚至 是 什么 都 不 做 。 不 同 于 世界 500 强 
公司 的 那些 需要 持续 多 年 面向 客户 的 项 目 ， 小 规模 或 者 临时 过 渡 的 项 目 并 不 需要 特别 复杂 
的 基础 架构 。 






































不 要 以 为 掌握 了 接 下 来 的 内 容 就 可 以 高 桃 无 忧 。 前 端 架 构 师 的 成 长 之 路 不 是 一 践 而 就 的 ， 
而 是 需要 保持 不 间断 的 学 习 状 态 。 这 种 状态 决定 了 我 们 的 水 平和 价值 。 对 于 前 端 开 发 领域 
的 广泛 涉猎 使 我 们 能 够 很 快 上 手 各 种 新 技术 和 方法 论 。 


我 们 的 强项 之 一 是 花 一 个 小 时 就 能 了 解 某 个 新 框架 或 者 Gulp 插件 ， 找 出 其 亮点 和 不 足 ， 
并 确定 它 在 项 目 中 的 可 行 性 。 因 此 ， 如 果 你 迷失 在 本 书 接 下 来 的 大 量 技术 和 概念 中 ， 请 记 
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住 : 并 没有 人 精通 每 一 种 技术 。 就 我 个 人 而 言 ， 我 也 只 精通 这 些 内 容 的 一 小 部 分 ， 胜 任 一 
大 部 分 ， 而 余下 部 分 则 是 入 门 水 平 。 





好 了 ， 关 于 这 些 核心 的 介绍 差不多 了 。 接 下 来 让 我 们 深入 分 析 它 们 的 具体 含义 。 


入 A 人 
3.2 ”四 个 核心 的 含义 
代码 
归根 结 底 ， 所 有 的 网 站 都 是 由 一 堆 文本 文件 和 资源 文件 组 成 的 。 当 我 们 面 对 制 作 网 站 所 
产生 的 大 量 代 码 时 ， 就 会 发 现 为 代码 和 资源 设 定 一 个 期 望 是 多 么 重要 。 





在 代码 部 分 ， 我 们 会 专注 于 如 何 实现 系统 架构 中 的 HIML、CSS 和 JavaScript。 





流程 
既然 早已 过 了 FTP 上 传 文件 的 时 代 ， 那 么 现在 重要 的 是 思考 怎么 用 工具 和 流程 构建 一 
个 高 效 且 避 免 出 错 的 工作 流 。 工 作 流 变 得 越 来 越 复杂 ， 那 些 用 于 构建 它们 的 工具 也 同样 
如 此 。 这 些 工 具 在 提高 生产 力 、 加 快 效 率 和 保持 代码 一 致 性 上 带 来 了 惊人 的 效果 ， 但 也 
伴随 着 过 度 工程 化 和 抽象 化 的 风险 。 


正如 工作 流 在 演变 ， 工 作 的 方式 也 在 进步 。 我 们 不 再 浪费 时 间 把 一 些 Photoshop 设计 稿 
重 构成 CMS 模板 页 面 。 因 为 逐渐 把 设计 的 环节 转移 到 浏览 器 中 ， 并 书写 响应 式 的 网 页 
框架 ， 所 以 在 实现 CMS 的 界面 之 前 ， 我 们 往往 已 经 开始 编写 所 有 的 HIML 和 CSS 代 
码 。 要 实现 这 个 颠 履 性 的 角色 转变 ， 就 需要 改变 现 有 的 开发 流程 。 

















测试 
要 构建 一 个 可 扩展 和 可 持续 优化 的 系统 ， 必 须 保 证 新 代码 与 老 代 码 能 够 很 好 地 兼容 。 我 
们 的 代码 不 会 独立 存在 ， 它 们 都 是 大 型 系统 中 的 一 部 分 。 创 建 覆 盖 面 广泛 的 测试 方案 ， 
能 确保 老 代 码 还 能 正常 运作 。 
在 这 个 部 分 ， 我 们 会 探讨 三 种 用 于 调试 网 站 的 不 同方 法 。 根 据 团队 的 规模 ， 测 试 方案 有 
时 会 细 分 为 很 多 部 分 ， 如 前 端 ”、 后 端 和 运 维 。 而 深 入 理解 每 个 部 分 将 会 有 助 于 你 和 其 他 
团队 高 效 沟通 。 























文档 
一 般 而 言 ， 如 果 不 是 团队 中 的 重要 成 员 要 离开 ， 我们 几乎 都 不 会 意识 到 文档 的 重要 性 。 
等 到 那个 时 候 ， 大 家 将 不 得 不 停 下 手头 的 工作 ， 优 先 编写 所 有 的 文档 。 作 为 前 端 架 构 
师 ， 你 要 善于 在 项 目 开 发 的 同时 编写 良好 的 文档 。 








这 个 部 分 将 会 介绍 团队 需要 编写 的 各 种 文档 类 型 、 发 布 文档 的 工具 ， 以 及 陪读 这 些 文档 
的 用 户 角 色 。 
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第 二 部 分 


代码 核心 





好 程序 绝 非 偶 然 天 成 。 这 并 不 是 说 开发 人 员 天 生 懒 惰 或 者 不 值得 信赖 ， 而 是 因为 独立 工作 
的 时 候 ， 我 们 针对 同一 个 问题 能 提出 各 种 不 同 的 解决 方案 。 不 同 于 走 迷 宫 ， 解 决 问题 几乎 
不 会 只 有 一 种 方法 。 我 们 每 个 人 的 经 验 、 观 点 和 习惯 各 异 ， 因 此 解决 同一 个 问题 的 方式 也 
不 尽 相 同 。 





开发 人 员 意 见 纷 经 是 很 正常 的 。 这 种 从 不 同 角 度 看 待 问 题 的 能 力 使 得 我 们 团队 越 来 越 强 
大 。 但 是 在 输出 方案 并 且 实 际 应 用 于 设计 系统 的 时 候 ， 我 们 既 不 希望 也 不 需要 在 程序 中 反 
映 出 这 些 差异 。 








即使 开发 人 员 都 能 以 同样 的 方式 解决 问题 ， 我 们 也 不 能 保证 代码 适用 于 系统 的 其 他 部 分 。 
这 就 无 异 于 开发 人 员 写 出 一 个 精致 优雅 的 Bootstrap 主题 ， 但 项 目 需要 的 却 是 个 性 化 主题 。 


这 一 部 分 将 帮助 我 们 探讨 如 何 提高 HTML、CSS 和 JavaScript 的 代码 质量 ， 编 写 类 、 设 计 
国 数 ， 以 及 声明 接口 。 





接 下 来 的 章节 并 非 面面俱到 。 作 为 一 名 前 端 架 构 师 ， 你 的 工作 是 不 断 地 探索 和 评估 新 的 技 
术 、 平 台 、 方 法 和 框架 。 世 界 上 没有 一 刀 切 式 的 解决 方案 ， 而 前 端 架 构 师 的 使 命 正 是 将 项 
目的 需求 与 前 端 开发 的 实际 情况 相 结 合 。 
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第 4 章 


HTML 








作为 前 端 架 构 师 ， 你 面临 的 第 一 个 挑战 就 是 标记 的 规范 化 ， 换 言 之 ， 你 希望 开发 人 员 写 出 
或 CMS 产 出 什么 样 的 标记 。 如 果 没 有 HIML，Web 就 不 复 存 在 。 因 此 我 们 暂且 把 CSS 和 
JavaScript 放 一 边 ， 先 单独 看 原始 的 内 容 和 控件 。 


文字 、 图 片 、 链 接 、 表 单 和 提交 按钮 都 是 所 有 Web 真正 需要 的 元 素 ， 也 是 在 Web 上 创建 


所 有 东西 的 基础 。 初 始 的 标记 做 得 不 好 ， 你 将 要 写 很 多 不 必要 的 CSS 和 JavaScript 来 弥 
补 。 而 初始 的 标记 做 得 好 ， 你 就 能 写 出 更 具 可 扩展 性 和 可 维护 性 的 CSS 和 JavaScript。 


4.1 过 去 处 理 标记 的 方法 

过 去 ， 不 少 前 端 从 业 人 员 来 自 出 版 界 ， 或 者 曾 与 出 版 界 的 设计 师 、 产 品 负责 人 共事 ， 因 此 
HTML 的 布局 跟 手 册 、 杂 志 或 报纸 等 传统 材料 非常 相似 。 现 如 今 二 者 不 能 等 同 了 。 但 是 在 
响应 式 设计 成 为 业界 标准 之 前 (甚至 之 后 的 一 段 时 间 )， 大 多 数 网 络 媒体 资源 都 被 视 为 多 
页 印刷 品 的 集合 。 项 目 分 工 之 后 ， 你 会 被 指定 负责 某 个 页 面 ， 从 头 开始 创建 DOM。 


过 去 ， 我 们 的 标记 通常 被 细 分 为 两 大 阵营 : 程序 式 和 静态 式 。 下 面 就 来 看 一 看 。 






























































4.1.1 程序 式 标记 : 自动 化 程度 100%， 可 控 程 度 0% 

在 Web 出 版 领域 ， 前 端 团 队 没有 标记 的 控制 权 是 非常 普遍 的 。 这 通常 是 由 于 在 前 端 团队 参 
与 项 目 之 前 ， 项 目的 功能 开发 (包括 HTML 输出 ) 就 已 经 进行 了 几 周 甚至 几 个 月 了 。 如 果 
标记 源码 被 复杂 的 泻 染 过 程 打 乱 ， 而 且 还 来 自 不 同 的 模板 ， 那 么 情况 就 会 变 得 更 加 糟糕 
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这 意味 着 ， 对 于 任何 不 熟悉 CMS 后 端 复 杂 性 的 人 而 言 ， 更 新 标记 将 会 异常 困难 。 而 往往 
到 了 这 个 时 候 ， 后 端 开 发 人 员 已 经 开始 着 手 别 的 任务 了 ， 没 有 时 间 回 过 头 来 进行 任何 重大 
的 修改 。 


这 种 制约 因素 的 影响 是 ， 为 了 把 内 容 更 好 地 艇 入 到 HIML 中 ，CMS 编辑 人 员 和 后 端 开发 
人 员 宁 可 写 一 堆 标 记 和 CSS 类 名 。 最 终 ， 他 们 编写 的 代码 如 下 : 












































<div id="header" class="clearfix"> 
<div id="header-screen" class="clearfix"> 
<div id="header-inner" class="container-12 clearfix"> 
<div id="nav-header" role="navigation"> 
<div class="region region-navigation"> 
<div class="block block-system block-menuy"> 
<div class="block-inner"> 
<div class="content"> 
<ul class="menu"> 
<li class="first Leaf"> 
<a href="/start">Get Started</a> 








Drupal.org 首页 的 这 一 段 代码 显示 了 一 个 简单 的 页 面 顶部 ， 即 使 在 填充 内 容 之 前 都 可 以 包含 
10 层 舱 套 ， 更 可 怕 的 是 ， 在 实际 应 用 中 这 还 不 是 一 个 特别 奔 张 的 现象 。 经 验 告 诉 我 们 ， 它 
还 可 能 徐 套 得 更 多 。 














以 前 ， 这 种 “div 乱 炖 ”或 许 确实 有 助 于 我 们 把 静态 Photoshop 图 像 做 成 标记 化 的 页 面 ， 但 
随 着 我 们 的 需求 日 渐 成 熟 ， 我 们 急需 更 好 的 方法 来 驾驭 它们 。 


4.1.2 ”静态 标记 : 自动 化 程度 0%， 可 控 程 度 100% 

如 果 我 们 的 项 目 规模 比较 小 ， 或 者 任务 只 是 开发 一 个 需要 填充 一 大 块 主体 区 域 的 页 面 ， 那 
么 编写 静态 标记 更 为 方便 。 虽 然 这 种 情况 灵活 性 很 大 ， 但 是 也 意味 着 我 们 必须 负责 维护 所 
有 的 代码 。 一 个 原本 在 CMS 模板 中 很 容易 的 改动 ， 现 在 需要 每 个 页 面 单独 手动 修改 。 所 
以 我 们 会 写成 这 样 : 

















<header> 
<section> 
<nav> 
<div> 
<ul> 
<li> 
<a href="/products">Products</a> 
<ul> 
<li> 
<a href="/socks">Socks</a> 


为 了 保持 简洁 ,，“ 语 义 化 ”的 标记 是 首选 ， 应 用 样式 所 依靠 的 是 HTML5 元 素 名 称 和 它们 的 


层级 关系 ， 而 非 CSS 类 名 。 我 们 的 标记 中 没有 CSS 类 名 ， 主 导航 的 样式 会 自动 继承 到 二 
级 导航 的 销 点 上 ， 我 们 次 受 其 害 ， 最 终 往 往 写 出 这 样 的 后 代 选 择 器 : 
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header > section > nav > div > UL > LL > af 
color: White; 


3} 
header > section > nav > div>ul>1li>ul>1li>a { 
color: blue; 


} 


过 去 ， 这 种 静态 标记 的 方式 使 得 对 于 任何 一 个 悬 停 状态 或 激活 状态 选择 器 ， 代 码 至 少 得 写 
这 么 长 。 你 根本 不 想 看 三 级 导航 会 被 写成 什么 样 。 我 们 还 是 赶紧 跳 过 这 部 分 ， 看 一 下 现在 
是 如 何 处 理 的 。 


4.2 平衡 可 控 性 和 上 自动 化 


作为 前 端 架构 师 ， 你 需要 评估 标记 产生 的 过 程 。 你 对 内 容 的 顺序 、 使 用 的 元 素 和 CSS 类 名 
有 多 大 的 控制 权 ? 这 些 元 素 在 将 来 改动 起 来 会 有 多 大 难度 ? 模板 是 否 易 用 ， 或 者 是 否 只 有 后 
端 开发 人 员 才 能 更 改 ? 甚至 ， 你 的 标记 全 是 基于 模板 系统 的 吗 ? 你 可 以 通过 系统 做 出 更 改 ， 
还 是 需要 手动 处 理 ?” 通过 回答 这 些 问题 ， 你 可 能 会 颠覆 自己 构建 HIML 和 CSS 的 方法 。 





























模块 化 标记 : 自动 化 程度 100%， 可 控 程 度 100% 

我 们 都 在 追求 的 理想 状态 是 ， 网 站 上 每 一 行 HTML 都 由 程序 自动 生成 ， 而 作为 前 端 开发 人 
员 ， 我 们 只 需要 管理 这 个 用 来 产生 标记 的 模板 和 流程 。 遗 憾 的 是 ， 现 实 通常 并 非 如 此 。 即 
使 在 最 好 的 情况 下 ， 也 存在 用 户 生 成 的 内 容 ， 而 这 些 内 容 儿 乎 都 无 法 自动 添加 CSS 类 名 来 
标记 。 无 论 CMS 系统 自动 生成 HTML 的 能 力 如 何 ， 让 CMS 决定 类 似 表 单 和 导航 栏 这 样 
的 标记 ， 有 时 候 会 更 简单 。 但 是 就 算 你 已 经 把 理想 状态 实现 了 90%， 标 记 的 模块 化 方案 仍 
然 可 以 给 你 带 来 理想 的 灵活 性 和 必要 的 自动 化 。 



























































模块 化 标记 和 程序 化 标记 的 区 别 在 于 ， 对 于 使 用 什么 标记 输出 既定 内 容 ， 我 们 不 会 完全 任 
由 CMS 决定 。 这 使 得 我 们 可 以 为 两 个 不 同 的 导航 实例 使 用 一 样 的 标记 ， 虽 然 CMS 生成 的 
标记 可 能 完全 不 一 样 。 模 块 化 标记 和 静态 化 标记 的 区 别 在 于 ， 程 序 化 地 执行 完 之 后 ， 我 们 
还 可 以 通过 一 套 类 名 系统 给 标记 动态 添加 CSS 类 名 ， 并 且 不 再 通过 元 素 标签 和 层级 关系 来 
决定 视觉 外 观 。 让 我 们 看 一 下 如 何 用 BEM 原则 模块 化 地 实现 一 个 简单 的 导航 : 

















<nav class="nav"> 
<ul class="nav__container"> 
<li class="nav__item"> 
<a href="/products" class="nav__link"> 
<ul class="nav__container--secondary"> 
<li class="nav__item--secondary"> 
<a href="/socks" class="nav__link--secondary"> 


年 看 上 去 ， 这 种 方案 似乎 相当 元 长 。 这 一 点 我 没有 什么 好 辩解 的 ， 但 我 要 说 的 是 ， 它 的 元 
余 程 度 其 实 是 恰到好处 的 。 给 每 个 元 素 都 添加 了 相应 的 CSS 类 名 之 后 ， 我 们 就 不 再 需要 依 
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赖 那些 只 为 了 样式 标签 而 存在 的 CSS 类 名 或 元 素 的 层级 关系 来 决定 视觉 外 观 了 。 相 比 动 
态 标记 ， 这 个 标记 更 清晰 ， 并 且 我 敢 说 ， 这 也 让 标记 的 组 织 形 式 更 “模块 化 ”了 。 这 个 导 
航 可 以 作为 网 站 的 导航 通用 模板 ， 不 用 改 任何 一 个 标记 就 可 以 在 多 处 复 用 。 因 此 ， 这 种 标 
记 并 不 是 先 等 CMS 创建 完成 再 另外 添加 样式 标记 的 ， 而 是 创建 的 同时 就 添加 了 样式 标记 ， 
然后 整合 到 网 站 的 整个 导航 系统 中 。 


4.3 这 一 切 背 后 的 设计 系统 

要 使 用 这 种 模块 化 方法 ， 我 们 首先 需要 改变 构建 页 面 的 方法 和 思路 。 单 独 的 静态 “网 页 ” 
其 实 根本 就 不 存在 。 所 谓 的 “网 页 ”其 实 是 过 去 的 产物 。 那 么 什么 是 当前 我 们 真正 需要 去 
创建 的 “页 面 ” 呢 ? 是 某 个 URL 的 内 容 吗 ? 如 何 保证 每 次 访问 某 个 URL 的 时 候 都 访问 到 
同样 的 内 容 呢 ? 如 果 你 登录 了 会 如 何 呢 ? 如 何 使 这 个 URL 的 内 容 根据 时 间 、 地 点 或 者 济 
览 器 的 不 同 而 有 所 不 同 呢 ? 越 早 地 意识 到 我 们 现在 所 做 的 工作 不 是 单纯 地 实现 某 个 页 面 ， 
而 是 设计 整个 系统 ， 就 能 越 早 地 开始 创造 那些 真正 让 人 惊艳 的 Web 作品 。 





































































































设计 系统 是 网 站 视觉 语言 的 程序 化 呈现 。 设 计 师 创造 的 视觉 语言 ， 是 用 来 描述 网 站 如 何 通 
过 视觉 与 用 户 沟通 的 工具 。 它 集合 了 颜色 、 字 体 、 按 钮 、 图 片 样式 、 排 版 布局 和 界面 版 
式 ， 用 来 传达 情绪 、 意 义 和 目 的 。 



































正如 词 可 以 分 为 名 词 、 动 词 和 形容 词 等 ， 作 为 前 端 开 发 人 员 ， 我 们 的 工作 就 是 把 视觉 语言 
拆 解 成 最 小 单元 。 拆 解 之 后 ， 我 们 可 以 创建 规则 ， 对 这 些 最 小 单元 进行 重组 。 只 有 将 视觉 
语言 充分 拆 解 之 后 ， 我 们 才能 知道 如 何 重新 把 它们 连 成 “句子 ”， 组 成 “段落 “， 合 并 为 
“章节 ”， 最 后 创作 成 一 部 精彩 的 “小 说 “。 转 换 的 目标 是 创建 具有 可 扩展 性 和 可 维护 性 的 
代码 库 ， 以 便 如 实地 重 现 视觉 语言 能 表达 的 任何 东西 。 

















在 后 面 的 章节 中 ， 我 们 将 进一步 创建 设计 系统 ， 但 是 在 目前 的 阶段 ， 认 清 我 们 正 开 发 的 是 
什么 很 重要 ， 因 为 在 着 手 开发 之 前 ， 我 们 需要 先决 定 设计 系统 要 如 何 建立 在 标记 之 上 。 


4.4 模块 化 CSS 理 论 的 多 面 性 


如 今 ，CSS 理论 几乎 和 CSS 或 JavaScript 框架 一 样 多 。 但 CSS 或 JavaScript 框架 的 用 法 较 
为 繁 玉 ， 而 且 必须 成 套 使 用 ， 而 CSS 理论 更 多 的 是 阐释 HTML 和 CSS 之 间 的 关系 ， 而 不 
是 预 编 译 的 代码 库 ， 因 此 使 用 起 来 更 为 灵活 。 


你 好 像 每 天 都 会 听 说 一 个 新 的 方法 ， 例 如 使 用 新 的 命名 空间 、 扩 充 数据 属性 ， 甚 至 是 在 
JavaScript 里 定义 CSS。 这 些 理论 都 有 它 的 亮点 ， 能 够 在 如 HTML 和 CSS 的 关系 方面 给 你 
一 些 新 的 启发 。 


当然 ， 没 有 哪个 方法 论 是 完美 的 ， 你 可 能 会 发 现 ， 一 个 项 目 与 某 一 个 方法 契合 得 最 好 ， 但 
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是 另 一 个 项 目 却 更 适合 用 另 一 个 方法 。 所 以 ， 你 完全 可 以 创造 自己 的 方法 论 ， 或 者 将 一 个 
现 有 的 理论 根据 自己 的 需求 进行 改造 。 因 此 ， 如 有 果 你 犹豫 不 决 ， 不 知道 如 何 选择 方法 论 ， 
最 好 是 看 一 些 比较 杰出 的 方法 论 ， 根 据 你 手头 的 项 目 来 分 析 其 中 哪些 可 用 ， 哪 些 不 可 用 。 














4.4.1 OOCSS 方 法 


下 面 的 代码 片段 展示 了 如 何 使 用 OOCSS (Object-Oriented CSS， 面 向 对 象 的 CSS) 方法 创 
建 一 个 HTML 切换 。 














<div class="toggle simple"> 
<div class="toggle-control open"> 
<h1 class="toggle-title">Title 1</h1> 
</div> 
<div class="toggle-details open"> ... </div> 
</div> 
OOCSS (http://oocss.org/) 有 两 个 主要 的 原则 : 分 离 结 构 和 外 观 ， 以 及 分 离 容 器 和 内 容 。 


分 离 结 构 和 外 观 ， 意 味 着 将 视觉 特性 定义 为 可 复 用 的 单元 。 前 面 那 段 简单 的 切换 就 是 一 个 
简短 的 可 复 用 性 强 的 例子 ， 可 以 套用 很 多 不 同 的 外 观 样式 。 例 如 ， 当 前 的 “simple” 皮 肤 
使 用 直角 ， 而 “complex” 皮 肤 可 能 使 用 圆 角 ， 还 加 了 阴影 。 


分 离 容器 和 内 容 ， 指 的 是 不 再 将 元 素 位 置 作为 样式 的 限定 词 。 和 在 容器 内 标记 的 CSS 类 名 
不 同 ， 我 们 现在 使 用 的 是 可 复 用 的 CSS 类 名 ， 如 toggle-title， 它 应 用 于 相应 的 文本 处 理 
上 ， 而 不 管 这 个 文本 的 元 素 是 什么 。 这 种 方式 下 ， 如 果 没 有 应 用 别 的 CSS 类 名 ， 你 可 以 让 
HI 标签 以 默认 的 样式 呈现 。 

当 你 想 提 供 一 套 组 件 让 开发 人 员 组 合 起 来 创建 用 户 界 面 时 ， 这 种 方法 非常 有 用 。Bootstrap 
就 是 一 个 特别 好 的 例子 ， 它 是 一 个 自 带 各 种 皮肤 的 小 组 件 系统 。Bootstrap 的 目标 是 创建 一 
个 完整 的 系统 ， 而 且 这 个 系统 能 够 创建 开发 者 可 能 需要 的 任何 用 户 界面 。 







































































4.4.2 SMACSS 方 法 
同样 以 切换 组 件 为 例 ， 按 照 SMACSS (Scalable and Modular Architecture for CSS， 模 块 化 
架构 的 可 扩展 CSS) 方法 ， 写 出 来 的 代码 如 下 : 
<div class="toggle toggle-simple"> 
<div class="toggle-control is-active"> 
<h2 class="toggle-title">Title 1</h2> 

</div> 

<div class="toggle-details is-active"> 

</div> 


</dl> 
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尽管 SMACSS (https://smacss.com/) 和 OOCSS 有 许多 相似 之 处 ， 


把 样式 系统 划分 为 五 个 具体 类 别 。 





基础 
如 果 不 添加 CSS 


布局 

把 页 面 分 成 一 些 
模块 

设计 中 的 模块 化 
状态 


类 名 ， 标 记 会 以 什么 外 观 呈 现 。 


区 域 。 





、 可 复 用 的 单元 。 


描述 在 特定 的 状态 或 情况 下 ， 模 块 或 布局 的 显示 方式 。 


主题 


一 个 可 选 的 视觉 外 观 层 ， 可 以 让 你 更 换 不 同 主题 。 


在 前 面 的 例子 中 ， 我 们 看 到 了 模块 样式 (toggle、toggle-title、toggle-details)、 子 模 
块 (toggle-simple) 和 状态 (is-active) 的 组 合 。 对 于 如 何 创 建功 能 的 小 模块 ，OOCSS 
和 SMACSS 有 许多 相似 之 处 。 它 们 都 把 样式 作用 域 限 定 到 根 节点 的 CSS 类 名 上 ， 然 后 通 
过 皮肤 (OOCSS) 或 者 子 模块 (SMACSS) 进行 修改 。 除 了 SMACSS 把 代码 划分 类 别 之 
外 ， 两 者 之 间 最 显著 的 差异 是 使 用 皮肤 而 不 是 子 模块 ， 以 及 带 is 前 绥 的 状态 类 名 。 














4.4.3 BEM 








这 里 同样 以 切换 组 件 为 例 ， 使 用 BEM (Block Element Modifier， 块 元 素 修 饰 符 ) 语法 写 H 





组 件 代 码 : 














方法 








<div class="toggle toggle--simple"> 
<div class="toggle_ control toggle_ control--active"> 


<h2 class= 
</div> 


<div class 
</div> 


</dl> 


BEM 是 我 们 要 看 的 第 三 个 方法 ， 是 SMACSS 的 另 一 个 方 国 


"toggle_ title">Title 1</h2> 


="toggle_ details toggle details--active"> 

















但 SMACSS 的 不 同 点 是 


| 


1。BEM 只 是 一 个 CSS 类 名 命 


名 规则 。 它 不 涉及 如 何 书 写 你 的 CSS 的 结构 ， 而 只 是 建议 每 个 元 素 都 添加 带 有 如 下 内 容 的 


CSS 类 名 。 
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块 名 

所 属 组 件 的 名 称 。 
元 素 

元 素 在 块 里 面 的 名 称 。 





任何 与 块 或 元 素 相 关联 的 修饰 符 。 


BEM 使 用 非常 简洁 的 约定 来 创建 CSS 类 名 ， 而 这 些 字符 串 可 能 会 相当 长 。 元 素 名 加 在 双 
下 划 线 后 (例如 toggle__details)， 修 饰 符 加 在 双 横 杠 后 (如 toggle__details--active)。 
这 里 的 details 是 元 素 ，active 是 修饰 符 ， 这 个 约定 使 得 CSS 类 名 非常 清晰 。 使 用 双 横 杠 
是 为 了 避免 块 名 被 混淆 为 修饰 符 。 


这 种 方法 在 OOCSS 或 SMACSS 里 使 用 的 好 处 是 ， 每 一 个 CSS 类 名 都 详细 地 描述 了 它 实 
现 了 什么 。 代 码 中 没有 open 或 者 is-active 这 样 只 在 特定 背景 下 才能 理解 的 CSS 类 名 。 
如 果 单 独 看 open 和 is-active 这 两 个 名 字 ， 我 们 并 不 知道 它们 的 含义 是 什么 。 虽 然 BEM 
方法 看 起 来 很 累 殴 、 很 宛 余 ， 但 是 当 看 到 一 个 toggle_details--active 的 CSS 类 名 ,我 
们 就 知道 它 是 表示 : 这 个 元 素 的 名 称 是 details， 位 置 在 toggte 组 件 里 ， 状 态 为 激活 。 


4.5 选择 适合 的 方案 


当然 ， 最 重要 的 还 是 要 找到 一 个 适合 的 解决 方案 。 不 要 因为 一 套 规范 很 流行 或 者 别 的 团队 
正在 使 用 就 选择 它 。 这 三 种 方法 都 提供 了 类 似 的 工具 ， 并 且 以 相近 的 方式 在 系统 中 使 用 。 


























在 Red Hat 网 站 中 ， 我 们 使 用 了 SMACSS 和 BEM 相 混 合 的 方案 ， 这 一 点 将 在 第 7 章 中 详 
细 讨 论 。 不 要 害怕 尝试 、 混 合 或 者 创造 出 独一无二 的 方案 ! 你 要 做 的 是 理解 这 些 方案 背后 
的 原则 ， 说 出 为 什么 你 的 方案 能 够 解决 项 目 面临 的 挑战 ， 并 且 确 保 团队 乐意 使 用 一 个 统一 
的 方案 。 如 果 你 决定 使 用 OOSMABEM， 大 胆 去 做 吧 ! 我 期 待 能 够 读 到 关于 它 的 东西 。 
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第 5 章 


(SS 





这 个 行业 最 好 的 事情 之 一 是 : 我 们 可 以 随意 地 和 其 他 开发 人 员 坐 下 来 ， 喝 点 咖啡 聊 聊 工 
作 。 这 似乎 无 关 紧 要 ， 但 我 告诉 你 ， 这 非常 重要 ! 我 们 在 一 个 以 标准 开放 、 软 件 开 源 、 信 
息 自 由 、 学 习 便 捷 为 基础 的 行业 中 工作 ， 使 用 的 工具 和 技术 变化 之 快 令 人 难以 置信 ， 但 正 
是 这 样 一 个 开放 的 行业 氛围 使 得 我 们 能 够 紧 跟 趋势 。 这 可 能 会 让 你 感到 惊讶 ， 但 在 一 些 领 
域 里 ， 你 永远 不 会 ， 也 不 可 能 在 一 些 商 业 场合 坐 下 来 与 同行 讨论 具体 工作 内 容 ， 除 非 他 们 
付 钱 让 你 这 么 做 。 在 那些 领域 中 ， 每 一 个 知识 、 每 一 个 技巧 、 每 一 个 预 设 、 每 一 个 宏 命 
令 、 每 一 个 文档 ， 以 及 每 一 个 捷径 都 可 能 被 挂牌 出 售 ， 而 你 最 不 想 做 的 事情 就 是 跟 潜 在 的 
竞争 对 手 一 起 坦诚 地 交换 那些 信息 。 


但 Web 领域 不 同 ， 我 们 正 是 依赖 分 享 知识 才 变 得 更 加 强大 。 我 们 发 表 博 客 文章 、 录 制 视频 
教程 、 创 建 公共 代码 仓库 、 在 Stack Overflow 上 发 表 帖 子 、 回 答 IRC 的 问题 ， 以 及 发 布 代 
码 到 CodePens、Gists、Sassmeisters、JSbins 和 Pastebins 上 ， 所 有 的 这 些 都 是 为 了 让 其 他 
人 可 以 学 习 到 我 们 所 了 解 的 东西 。 喝 杯 咖啡 ,讨论 现行 的 Web 开发 实践 和 新 的 CSS 框架 ， 
这 就 是 我 们 如 何 分 享 知识 以 及 如 何在 这 个 行业 中 学 习 的 最 基本 表现 。 


因此 ， 在 我 们 从 事 的 行业 中 ， 拆 请 同行 一 起 出 去 喝 咖 啡 不 仅 是 可 接受 的 ， 而 且 还 会 被 当成 
一 种 有 意义 的 行为 ! 这 些 咖啡 会 帮助 我 们 学 到 新 的 事物 ， 获 得 新 的 商务 联系 ， 找 到 新 的 工 
作 ， 甚 至 交 到 很 好 的 朋友 。 可 以 说 ， 多 年 以 来 的 喝 咖 啡 、 喝 酒 、 喝 茶 或 者 红茶 菌 的 经 历 ， 
使 我 相信 一 起 喝 东 西 时 的 交流 是 我 们 这 个 行业 宝贵 的 无 形 资产 。 

坚持 用 咖啡 或 者 酒精 促进 谈话 的 好 处 在 于 ， 我 们 会 不 断 了 解 人 们 对 什么 感 兴趣 ， 以 及 人 们 
在 朝 着 什么 方向 努力 。 这 对 我 来 说 很 重要 ， 不 是 因为 我 依赖 别人 来 知道 下 一 步 该 做 什么 ， 
而 是 因为 我 能 够 验证 我 所 学 习 的 东西 以 及 我 自己 的 发 现 。 每 一 年 我 都 会 回顾 我 的 CSS 方法 
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是 如 何 发 展 的 。 所 以 ,无论 我 最 新 痴迷 的 是 预 处 理 、 构 建 工具 、 样 式 驱 动 的 设计 ， 还 是 基 
于 组 件 的 设计 系统 ， 我 都 会 因为 和 别人 有 完全 相同 的 发 现 而 感到 很 兴 


我 现在 编写 的 CSS 跟 三 年 前 的 大 相 径 庭 。 每 建设 一 个 网 站 ， 我 都 会 从 中 学 到 新 的 东西 ， 并 
尝试 应 用 到 下 一 个 项 目 中 。 这 是 一 个 逐步 发 展 的 过 程 ， 我 把 学 到 的 东西 和 读 到 的 东西 集聚 
到 一 起 ， 并 尝试 用 改进 的 方案 解决 我 所 面临 的 特定 问题 。 每 一 次 迭代 都 提升 了 我 的 技术 ， 
也 大 大 加 深 了 我 对 可 扩展 性 和 可 维护 性 设计 系统 的 理解 。 


每 次 迭代 都 会 带 来 一 些 激动 人 心 的 讨论 ， 也 许 是 与 各 种 各 样 的 同事 、 业 内 同行 ， 也 许 是 与 
一 些 参 会 者 。 我 会 因为 每 次 谈话 中 的 共鸣 而 感到 狂喜 ， 比 如 发 现 我 并 非 唯一 使 用 数据 属性 
或 可 选 样式 来 处 理 组 件 变量 的 人 ! 


作为 一 名 前 端 架 构 师 ， 你 可 能 不 需要 知道 不 起 上 腿 的 Opera Mini 版 本 上 的 每 一 个 细微 的 CSS 
bug， 但 是 你 必须 理解 CSS 的 主要 发 展 趋势 ， 并 能 制定 会 让 团队 获得 成 功 的 计划 。 如 果 你 
不 了 解 目前 CSS 的 发 展 趋势 ， 或 者 没有 快速 领情， 那么 尝试 和 其 他 开发 人 员 多 喝 几 杯 咖啡 
吧 ， 或 者 在 你 下 一 次 参加 行业 会 议 时 ， 多 花 一 些 时 间 与 参 会 的 同行 进行 社交 互动 。 但 是 在 
你 做 这 些 事 之 前 ， 请 阅读 下 面 的 章节 ， 你 会 了 解 几 年 前 CSS 技术 的 情况 ， 当 时 写 的 CSS 
为 什么 不 生效 ， 以 及 现在 的 CSS 技术 发 展 成 什么 样 。 


5.1 特性 之 争 与 继承 之 痛 
过 去 几 年 ， 我 们 仍然 在 处 理 我 在 前 一 章 中 描述 的 100% 动态 标记 或 100% 静态 标记 。 不 论 


是 哪 一 种 ， 我 们 几乎 总 是 从 全 局 作用 域 开始 开发 ， 一 层 一 层 增 加 细 闻 。 我 们 从 使 用 通用 样 
式 开 始 ， 比 如 页 首 和 段落 的 标签 ， 然 后 给 页 面 里 的 各 个 部 分 应 用 具体 的 样式 : 


























































































































<body> 
<div class="main"> 
<h2>I'm a Header</h2> 
</div> 
<div id="sidebar"> 
<h2>I'm a Sidebar Header</h2> 
</div> 
</body> 


<style> 

h2 { 
font-size: 24px; 
color: red; 


#sidebar h2 { 
font-size: 20px; 
background: red; 
color: white; 

} 

</style> 
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现在 侧 边栏 的 H2 是 白色 字体 红色 背景 ， 除 此 之 外 的 每 一 个 H2 都 是 红色 字体 。 


这 个 概念 很 容易 理解 ， 如 果 你 是 印刷 行业 出 身 ， 会 百感 交集 。 每 次 你 把 一 个 H2 放 在 侧 边 
栏 ， 它 会 被 应 用 相同 的 样式 ， 直 到 我 们 需要 用 到 一 个 在 侧 边栏 的 日 历 组 件 ， 又 要 求 H2 显 
示 为 和 页 首 一 样 (红色 字体 且 不 填充 背景 色 )。 但 是 没关系 ! 我 们 可 以 添加 另 一 个 类 名 并 
且 重 写 让 人 讨厌 的 侧 边栏 样式 ， 对 吧 ? 


























<body> 
<div id="main"> 
<h2>I'm a Header</h2> 
</div> 
<div id="sidebar"> 
<h2>I'm a Sidebar Header</h2> 
<div class="calendar"> 
<h2>I'm a Calendar Header</h2> 
</div> 
</div> 
</body> 


<style> 

h2 { 
font-size: 24px; 
color: red; 


} 


#sidebar h2 { 
font-size: 20px; 
background: red; 
color: white; 


} 


#sidebar .calendar h2 { 
background: none; 
color: red; 
































</style> 
这 种 方法 的 问题 很 多 。 
选择 器 优先 级 

无 论 你 处 理 带 ID 的 标签 还 是 长 选择 器 ， 重 写 一 个 选择 器 时 ， 总 是 需要 注意 它 的 优先 级 。 
颜色 重 置 

要 恢复 到 原来 的 H2 颜色 ， 我 们 必须 再 次 指定 样式 ， 并 且 要 覆盖 当前 的 背景 颜色 。 
位 置 依赖 

现在 我 们 的 日 历 样式 依赖 于 侧 边栏 的 样式 。 如 有 果 将 日 历 移 到 页 首 或 者 页 尾 ， 样 式 将 会 改变 。 
多 重 继承 





现在 这 个 H2 的 样式 来 源 多 达 三 个 ， 这 意味 着 只 要 改变 主体 或 侧 边栏 的 样式 ， 都 会 影响 
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到 日 历 的 呈现 。 


深层 点 套 
日 历 控件 里 的 日 历 条 目 可 能 还 有 其 他 的 H2， 而 它们 也 需要 一 个 更 具体 的 选择 器 ， 也 
一 来 ，H2 的 样式 来 源 就 增加 到 了 四 个 。 


5.2 一 种 现代 的 、 模 块 化 的 方法 

我 们 在 第 4 章 讨论 HTML 时 就 涉及 了 一 些 现代 模块 化 原则 ， 大 多 数 CSS 框架 用 它们 来 解 
决 刚 才 描 述 的 方案 中 出 现 的 问题 。 虽 然 OOCSS、SMACSS 和 BEM 对 使 用 什么 样 的 标记 
有 着 不 同 的 观点 ， 但 它们 中 的 每 一 个 都 提供 了 如 何 写 CSS 的 建议 ， 无 论 你 采取 了 哪 一 个 方 
案 ， 这 些 建议 都 很 有 价值 。 让 我 们 来 快速 看 一 下 这 些 关键 原则 ， 并 且 了 解 它们 是 如 何 帮助 
我 们 解决 前 面 遇 到 的 问题 的 。 


OOCSS 带 来 分 离 容 器 和 内 容 的 思想 ， 我 们 学 会 不 再 使 用 位 置 作为 样式 的 限定 词 。 你 完 

可 以 在 网 站 上 放 一 个 侧 边栏 ， 并 且 给 这 个 侧 边 栏 使 用 任何 你 喜欢 的 样式 ， 但 是 ， 侧 边栏 的 
样式 不 应 该 影响 侧 边栏 的 内 容 。#sidebar hz2 意味 着 ， 放 在 侧 边栏 的 每 一 个 H2 元 素 ， 要 么 
接受 这 个 样式 ， 要 么 就 重 写 来 避免 使 用 这 个 样式 。 而 .my-sidebar-widget-heading 意味 着 
样式 只 限定 于 这 一 个 标题 ， 完 全 不 会 影响 其 他 标题 。 


SMACSS 给 我 们 带 来 把 布局 和 组 件 分 离 到 不 同文 件 夹 的 思想 ， 进 一 步 将 侧 边栏 的 角色 和 日 
历 模 块 划分 开 。 现 在 我 们 只 是 定义 了 侧 边 栏 的 角色 是 布局 ， 甚 至 不 允许 元 素 样 式 在 那 部 分 
Sass 语法 的 代码 里 出 现 。 如 果 你 要 在 侧 边 栏 里 放 一 些 代码 ， 并 且 疝 它们 添加 样式 ， 那 么 这 
些 元 素 需 要 是 某 个 组 件 的 一 部 分 ， 并 且 需 要 在 组 件 的 文件 夹 里 定义 。 

虽然 严格 来 说 ，BEM 并 不 算是 一 种 CSS 方法 论 ， 但 它 让 我 们 知道 ， 给 标记 中 每 个 CSS 类 
名 一 个 独一无二 的 标识 是 有 价值 的 。 这 是 因为 这 样 会 使 每 个 BEM 风格 的 CSS 类 名 都 可 以 
对 应 到 某 一 组 独 属于 该 元 素 的 CSS 属性 ， 而 不 会 随 着 具体 情境 或 选择 器 的 使 用 而 变化 : 





区 
苍 




























































































<body> 
<div class="main"> 
<h2 class="content__title">"I'm a Header"</h2> 
</div> 
<div class="sidebar"> 
<h2 class="content__title--reversed"> 
"I'm a Sidebar Header" 
</h2> 
<div class="calendar"> 
<h2 class="calendar__title">"I'm a Calendar Header"</h2> 
</div> 
</div> 
</body> 


<style> 
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/* 组 件 文件 夹 */ 

.Content__titLe { 
font-size: 24px; 
color: red; 


.content_ title--reversed { 
font-size: 20px; 
background: red; 
color: white; 


.CaLendar_ title { 
font-size: 20px; 
color: red; 


/* 布局 文件 夹 */ 
.main { 
float: left; 


.Sidebar { 
float: right; 


} 
</style> 


这 就 解决 了 刚才 的 由 于 依赖 位 置 而 造成 CSS 样式 混乱 的 问题 。 
选择 器 优先 级 
把 ID 选择 器 改 成 CSS 类 名 选择 器 是 一 个 很 好 的 开始 ， 这 样 可 以 停止 CSS 优先 级 之 间 


的 冲突 问题 ， 让 每 一 个 选择 器 的 权重 扁平 化 成 “1”， 我 们 就 不 再 需要 利用 优先 级 较量 出 
“胜利 者 ”来 决定 样式 。 




















颜色 重 置 
比 降 低 权重 更 好 的 方法 是 对 每 一 个 元 素 使 用 唯一 的 选择 器 。 这 样 你 的 模块 样式 就 不 再 会 
与 侧 边栏 样式 或 者 页 面 通用 样式 冲突 了 。 





























位 置 依赖 
去 掉 布 局 文件 中 的 样式 代码 之 后 ， 我 们 就 不 用 再 担心 因为 把 日 历 组 件 移出 侧 边栏 而 造成 
样式 改变 了 。 


多 重 继承 
每 个 标题 都 有 了 自己 唯一 的 CSS 类 名 之 后 ， 我 们 就 可 以 任意 修改 其 中 的 某 个 样式 而 不 
会 影响 其 他 标题 了 。 如 果 你 想 改变 多 个 选择 器 对 应 的 样式 ， 可 以 使 用 预 处 理 器 变量 、 混 
入 _(mixin) 或 继承 来 帮 你 做 。 
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深层 谋 套 
即使 在 日 历 的 层级 上 ， 我 们 也 仍然 没有 给 H2 标签 应 用 任何 样式 。 因 此 再 给 日 历 中 的 新 
H2 添加 样式 时 ， 就 不 需要 重 写 通用 样式 、 侧 边栏 样式 或 者 日 历 的 头 部 样式 了 。 


5.3 ”其 他 有 助 益 的 原则 


5.3.1 单一 职责 原则 

在 建立 Red Hat 网 站 的 过 程 中 ， 我 发 现 了 一 些 对 规划 CSS 框架 有 极 大 帮助 的 东西 。 

单一 责任 原则 规定 你 创建 的 所 有 东西 必须 有 单一 的 、 高 度 聚 焦 的 理由 。 你 应 用 到 某 个 选择 
器 里 的 样式 应 该 是 为 了 单一 目的 而 创建 的 ， 并 且 能 够 很 好 地 实现 这 个 目标 。 
这 并 不 意味 着 你 应 该 为 padding-10、font-size-20 和 color-green 设置 单独 的 CSS 类 名 。 
我 们 关注 的 是 样式 适用 在 哪些 地 方 ， 而 不 是 这 些 样式 本 身 。 让 我 们 来 看 下 面 的 例子 : 










































































<div class="calendar"> 
<h2 class="primary-header">This Is a Calendar Header</h2> 
</div> 


<div class="blog"> 
<h2 class="primary-header">This Is a Blog Header</h2> 
</div> 


.primary-header { 
color: red; 
font-size: 2em; 





虽然 上 面 的 例子 看 似 相当 有 效 ， 但 是 它 显然 不 符合 我 们 的 单一 责任 原则 。.prinary-header 
这 个 CSS 类 名 被 应 用 于 页 面 上 不 止 一 个 不 相关 的 元 素 上 。 现 在 ，primary-header 的 “ 责 
任 ” 是 既 负 责 日 历 的 标题 也 负责 博客 的 标题 ， 这 意味 着 对 博客 的 标题 做 任何 更 改 也 会 影响 
到 日 历 的 标题 ， 除 非 你 像 下 面 这 么 写 ， 









































<div class="calendar"> 
<h2 class="primary-header">This Is a Calendar Header</h2> 
</div> 


<div class="blog"> 
<h2 class="primary-header">This Is a Blog Header</h2> 
</div> 


.primary-header { 
color: red; 
font-size: 2em; 


} 


.blog .primary-header { 
font-size: 2.4em; 
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这 种 方法 虽然 在 短期 内 有 效 ， 但 是 也 使 我 们 再 次 面临 本 章 开 头 所 提 到 的 那 几 个 问题 。 这 个 
新 的 标题 样式 现在 取决 于 元 素 位 置 ， 具 有 多 重 继承 性 ， 并 且 引 发 了 “最 高 优先 级 ”争夺 赛 。 


针对 这 个 问题 ， 一 个 更 加 可 持续 的 方法 是 让 每 个 CSS 类 名 都 有 单一 的 、 有 重点 的 任务 : 














<div class="calendar"> 
<h2 class="calendar-header">This Is a Calendar Header</h2> 
</div> 


<div class="blog"> 

<h2 class="blog-header">This Is a Blog Header</h2> 
</div> 
.CaLendar-header { 

color: red; 

font-size: 2em; 


} 


.blog-header { 
color: red; 
font-size: 2.4em; 


虽然 这 种 方法 确实 会 导致 一 些 代码 重复 (红色 字体 定义 了 两 次 ), 但 是 它 的 可 持续 性 带 来 
的 好 处 大 大 超过 代码 重复 的 任何 坏处 。 这 里 多 出 来 的 代码 对 网 页 大 小 的 增加 而 言 微不足道 
(gzip 喜欢 重复 的 内 容 )， 而 且 由 于 博客 标题 不 一 定 一 直 保持 红色 ， 如 果 整 个 项 目 强制 执行 
单一 责任 原则 ， 就 能 够 确保 在 进一步 改变 时 ， 我 们 可 以 毫 不 费力 地 完成 ， 并 且 也 不 需要 回 
顾 之 前 的 代码 。 


5.3.2 单一 样式 来 源 

单一 样式 来 源 的 方法 将 单一 责任 理论 应 用 到 更 深层 次 ， 不 仅 每 个 CSS 类 名 被 创建 为 单一 用 
途 ， 而 且 每 个 标签 的 样式 也 只 有 单一 的 来 源 。 在 一 个 模块 化 设计 中 ， 任 何 组 件 的 设计 必须 
由 组 件 本 身 决 定 ， 而 不 应 该 被 它 的 父 类 名 限制 。 让 我 们 看 看 实际 应 用 中 的 情况 : 






































<div class="blog"> 
<h2 class="blog-header">This Is a Blog Header</h2> 


<div class="calendar"> 
<h2 class="calendar-header">This Is a Calendar Header</h2> 
</div> 
</div> 


/* calendar.css */ 

.CaLendar-header { 
color: red; 
font-size: 2em; 


} 


/* blog.css */ 
.blog-header { 
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color: red; 
font-size: 2.4em; 


} 


.blog .calendar-header { 

font-size: 1.6em; 

} 
写 这 样 的 样式 是 为 了 当日 历 在 博客 文章 里 出 现时 ， 缩 小 日 历 头 部 文字 的 字体 。 从 设计 的 角 
度 看 ， 这 无 可 厚 非 ， 最 终日 历 组 件 会 根据 它 在 哪里 而 改变 外 观 。 我 们 称 这 种 带 条 件 的 样式 
为 “上 下 文 "， 已 被 广泛 应 用 到 我 的 设计 系统 里 。 
这 种 方法 的 主要 问题 是 ， 定 义 缩小 字体 的 样式 代码 在 博客 组 件 的 文件 中 ， 而 不 是 单一 地 存在 于 
日 历 组 件 文件 。 在 这 种 情况 下 ， 样 式 散落 在 多 个 组 件 文件 里 ， 导 致 很 难 预料 某 个 组 件 放 到 
页 面 中 会 长 什么 模样 。 为 了 缓解 这 个 问题 ， 我 建议 把 带 上 下 文 的 样式 移 到 日 历 模 块 代码 中 : 















































<div class="blog"> 
<h2 class="blog-header">This Is a Blog Header</h2> 


<div class="calendar"> 
<h2 class="calendar-header">This Is a Calendar Header</h2> 
</div> 
</div> 


/* calendar.css */ 

.Calendar-header { 
color: red; 
font-size: 2em; 


.blog .calendar-header { 
font-size: 1.6em; 


} 


/* blog.css */ 
.blog-header { 
color: red; 
font-size: 2.4em; 
} 
通过 这 种 方法 ， 当 日 历 头 部 出 现在 博客 文章 里 时 ， 我 们 仍然 能 够 缩小 它 的 字体 ， 而 且 如 果 
把 所 有 带 calendar-header 上 下 文 的 样式 放 到 日 历 文 件 中 ， 我 们 可 以 看 到 日 历 头 部 所 有 可 
能 的 变动 都 放 在 一 起 。 这 使 得 更 新 日 历 模块 更 容易 〈 因 为 我 们 知道 所 有 变动 情况 )， 也 使 
得 我 们 能 为 每 一 个 变动 创建 适当 的 测试 覆盖 。 


5.3.3 组 件 修饰 符 
虽然 单一 样式 来 源 的 方法 确实 可 以 让 代码 变 得 更 清晰 ， 但 是 如 果 要 跟踪 多 个 不 同 的 上 下 文 
还 是 很 困难 的 。 如 果 你 发 现 日 历 头 部 需要 在 数 十 个 上 下 文中 显示 较 小 的 字体 ， 那 么 是 时 候 
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改 用 修饰 符 类 名 了 。 


组 件 修 饰 符 〈 又 称 皮肤 或 者 子 组 件 ， 取 决 于 你 所 赞同 的 方法 论 ) 让 你 能 够 定义 一 个 组 件 在 
多 个 不 同情 况 下 的 多 种 变化 。 它 的 工作 方式 和 单一 样式 的 来 源 方法 非常 相似 ， 但 是 修饰 符 
类 名 的 属性 不 再 是 父 组 件 ， 而 是 组 件 本 身 的 一 部 分 : 


<div class="blog"> 
<h2 class="blog-header">This Is a Blog Header</h2> 


<div class="calendar calendar--nested"> 
<h2 class="calendar-header">This Is a Calendar Header</h2> 
</div> 
</div> 


/* calendar.css */ 

.CaLendar-header { 
color: red; 
font-size: 2em; 


.CaLendar--nested .calendar-header { 
font-size: 1.6em; 


} 


/* blog.css */ 

.blog-header { 
color: red; 
font-size: 2.4em; 





在 前 面 的 例子 中 ， 我 们 使 用 传统 的 BEM 语法 创建 了 catendar- -nested 修饰 符 。 这 个 CSS 
类 名 单独 使 用 时 什么 都 不 做 ， 而 当 它 被 应 用 到 日 历 组 件 上 时 ,组 件 里 的 元 素 就 能 拿 它 做 局 
部 上 下 文 并 改变 外 观 。 




















我 们 能 够 用 这 种 方法 把 修改 过 的 日 历 皮肤 使 用 到 任何 地 方 ， 从 而 得 到 更 小 的 字体 (以 及 想 
要 的 其 他 改变 )。 这 保证 了 所 有 组 件 的 变动 都 在 一 个 文件 里 ， 而 且 能 用 到 任何 需要 的 地 方 
(或 者 不 使 用 它们 ) ， 而 不 依赖 于 不 确定 的 父 节 点 CSS 类 名 。 


5.4 ”小结 


能 够 帮助 你 创建 可 维护 代码 库 的 CSS 技巧 有 很 多 ， 本 章 涉及 的 只 是 冰山 一 角 ， 包 括 的 内 容 
如 下 : 


。 分 离 容器 和 内 容 

。 区 分 布局 与 组 件 的 角色 和 职责 

。 在 标记 上 使 用 单一 、 扁 平 的 选择 器 

。 使 用 其 他 原则 ， 比 如 单一 职责 原则 、 单 一 样式 来 源 、 内 容 修饰 符 
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本 章 和 前 一 章 列 出 了 很 多 建议 ， 任 何 形 式 、 任 何 大 小 的 项 目 都 可 以 从 中 获 益 ， 但 最 终 如 何 
编写 CSS 仍 由 你 和 你 的 团队 决定 。 我 唯一 的 要 求 是 ， 通 过 对 这 些 问 题 的 探讨 ， 你 能 够 加 次 
对 前 端 架 构 的 思考 ， 建 立 起 什么 是 好 架构 和 如 何 搭 建 架构 的 观念 ， 并 在 代码 评审 时 能 够 使 
用 其 中 的 某 些 原则 作为 分 析 和 评论 的 根据 。 这 样 做 可 以 让 你 巩固 代码 核心 ， 使 之 更 好 地 支 
撑 起 整个 前 端 架 构 ， 并 且 帮 助 团队 走向 成 功 。 
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第 6 章 
JavaScript 





虽然 很 多 人 认为 不 应 该 把 JavaScript 纳入 Web 开发 必 备 技能 里 ， 但 它 却 是 目前 很 多 网 站 不 
可 或 缺 的 一 部 分 。 不 论 你 创建 的 是 小 型 作品 集 站 点 、 企 业 门 户 网 站 还 是 电 商 网 站 ， 你 难免 
会 遇 到 只 用 HTML 和 CSS 无 法 解决 的 问题 ， 可 能 是 幻灯 片 和 图 片 灯 箱 ， 也 可 能 是 完整 的 
客户 端 应 用 。 




















本 书 主 要 关注 如 何 创建 可 扩展 且 可 持续 的 设计 系统 ， 所 以 我 会 重点 帮助 你 建立 项 目 计 划 和 
辨别 高 质量 代码 。 至 于 “如 何 创建 基于 JavaScript 的 Web 应 用 ”， 就 留 给 其 他 相关 的 书 去 讨 
论 了 。 实 际 上 ， 谈 到 Web 应 用 ， 让 我 们 先 来 讨论 一 个 重要 的 话题 : 如 何 选择 完美 的 框架 。 


6.1 选择 框架 

首先 需要 指出 的 是 ， 没 有 哪个 JavaScript 框架 是 完美 的 。 本 章 也 不 会 告诉 你 应 该 选择 
AngularJS 还 是 ReactJS， 更 不 会 尝试 列举 出 所 有 的 可 选 框 架 ， 因 为 当 这 本 书 出 版 时 ， 这 些 
框架 很 多 都 会 变 得 过 时 ， 而 且 这 种 列表 必定 会 遗漏 那些 最 新 的 、 最 流行 的 框架 。 

我 要 告诉 你 的 是 : 你 很 可 能 完全 不 需要 用 任何 框架 。 首 先 需要 决定 的 是 选择 哪些 工具 来 实 
现 目标 ， 而 不 是 选择 哪些 框架 和 插件 。 
































这 一 点 不 仅 适用 于 JavaScript 框架 ， 也 适用 于 CMS、MVC 和 CSS 框架 。 有 很 多 成 功 的 网 
站 也 只 不 过 是 静态 网 站 生成 器 ， 加 上 少量 手动 创建 的 Sass 文件 和 几 十 个 JavaScript 函数 。 


首先 假设 我 们 没有 使 用 Drupal 或 WordPress， 也 不 需要 AngularJS 或 ReactJS， 并 且 可 以 自 
己 手 动 编写 所 有 的 样式 。 然 后 对 照 项 目 需 求 ， 在 处 理 用 户 验 证 、 页 面 版 本 管理 或 者 API 大 


























37 


图 灵 社 区 会 员 leezom(superjavaman.zhangli@gmail.com) 专 享 尊重 版 权 





数据 传输 这 类 问题 之 前 ， 看 哪些 需求 是 能 先 满足 的 。 当 遇 到 难以 手动 实现 的 需求 ， 并 且 已 
经 有 开源 项 目 或 软件 可 以 解决 问题 时 ， 再 开始 评估 第 三 方 工具 。 


用 精简 的 方案 做 项 目 ， 而 不 是 一 开始 就 准备 一 大 套 工 具 和 大 规模 的 启 始 页 ， 除 非 增 加 复杂 
度 和 代码 体积 利 大 于 次 ， 否 则 不 要 轻易 放弃 精简 方案 。 


6.2 维护 整洁 的 JavaScript 代 码 


即使 平时 做 的 项 目 都 比较 简单 ， 最 复杂 的 情况 也 不 过 是 使 用 jQuery 和 插件 ， 如 果 能 针对 
“如 何 编写 JavaScript” 创 建 标准 ， 你 仍然 能 从 中 获 益 。 你 会 发 现 ， 如 果 没 有 某 种 期 望 和 规 
范 ， 你 的 JavaScript 文件 会 像 断 线 的 风筝 一 样 不 受 控制 ， 代 码 也 难以 测试 和 重 构 。 作 为 前 
端 架构 师 ， 在 给 JavaScript 代码 评审 制定 标准 的 时 候 ， 你 可 以 参考 下 面 概括 的 一 些 规范 。 
























































6.2.1 保持 代码 整洁 

JavaScript 是 一 种 脚本 语言 ， 这 跟 HTML 和 CSS 不同。 如果 你 忘记 闭合 一 个 HTML 标签 或 
者 写 了 无 效 的 CSS， 最 坏 的 情况 不 过 是 页 面 上 出 现 了 一 些小 缺陷 。 如 果 你 在 JavaScript 代 
码 里 添加 了 太 多 的 喜 号 或 者 忘记 闭合 大 括号 ， 整 个 网 站 都 有 可 能 骨 溃 。 


由 于 编写 恰当 的 JavaScript 非常 关键 ， 最 好 在 项 目 中 结合 单元 测试 使 用 一 些 格式 /错误 提 
示 工 具 。 如 果 在 开发 流程 里 运用 其 中 一 条 ， 这 不 仅 有 助 于 发 现 导 致 崩 洽 的 代码 ， 而 且 能 帮 
助 你 执行 关于 代码 格式 甚至 是 代码 编写 的 规范 。 


JS Hint (http://jshint.com/) 是 这 些 工 具 中 一 个 很 好 的 例子 。 它 能 够 在 你 的 文本 编辑 器 里 使 
用 , 一 旦 你 犯错 ， 它 就 会 即时 标记 出 来 。 你 甚至 可 以 把 它 用 在 构建 系统 中 ， 这 样 如 果 有 任 
何 代 码 不 符合 规范 ， 将 无 法 通过 测试 。 





















































这 里 有 几 条 可 以 使 用 JS Hint 检查 的 规则 : 


。 强制 使 用 === 和 !== 代替 == 和 != 

。 限制 代码 块 嵌 套 深度 

。 限制 函数 的 参数 数量 

。 如 果 函 数 重复 定义 ， 发 出 警告 

。 如 果 变 量 创建 后 未 被 使 用 ， 发 出 警告 








6.2.2 ”创造 可 复 用 的 函数 

依照 写 jQuery 代码 的 方式 ， 我 们 的 代码 常常 以 CSS 选择 器 (名词) 开始 ， 紧 接着 是 执行 
一 连 串 国 数 (动词 )。 这 正 是 人 类 大 脑 的 工作 方式 ， 我 们 首先 想到 需要 锁定 的 事物 ， 然 后 
考虑 对 它 做 什么 。 虽 然 这 使 代码 对 人 们 来 说 可 读 性 很 强 ， 但 可 复 用 性 却 并 不 高 。 来 看 看 我 
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们 给 CMS 创造 的 警告 类 名 : 


$s('.red-alert') 
.Css('background-color', "red") 
.on('click', function() { 
console.log($(this).html()); 
}); 


$('.yellow-alert') 
.Css('background-color', "yellow") 
.oNn('click', function() { 
console.log($(this).html()); 

}); 


这 上段 代码 很 短 ， 也 很 容易 读 懂 。 我 们 知道 .redalert 给 元 素 添 加 了 红色 背景 ， 然 后 绑 定 事 
件 函 数 ， 点 击 元 素 后 ， 它 的 内 容 会 被 打印 到 控制 台 上 。 


我 们 也 知道 .yellow-alert 给 元 素 添 加 了 黄色 背景 ， 并 绑 定 了 同样 的 事件 函数 。 


对 于 只 有 两 个 类 名 的 情况 ， 这 可 能 还 比较 好 用 ， 但 是 这 样 的 代码 是 不 可 复 用 的 。 如 果 想 创 
建 更 多 的 警告 颜色 ， 我 们 需要 复制 其 中 一 个 ， 然 后 改变 类 名 和 颜色 。 而 且 ， 如 果 因 为 某 些 
原因 创建 了 十 多 块 这 样 的 代码 ， 当 我 们 想 回头 调整 点 击 函 数 或 者 添加 字体 颜色 去 搭配 背景 
色 时 ， 可 能 需要 改 几 十 次 才能 完成 。 























相 比 写 一 系列 描述 句 一 样 的 代码 ， 把 代码 拆 分 成 小 块 、 可 复 用 函数 可 以 帮 我 们 创建 出 更 好 
的 系统 。 看 看 以 下 替代 方案 : 
$.fn.log_ text_on_click = function() { 
this.on('click', function() { 
console.log($(this).html()); 
]); 


return this; 


3 


$.fn.add_background = function(color) { 
this.css('background-color', color); 
return this; 


$('.red-alert').add_background("red").log_ text_on_click(); 
$('.yellow-alert').add_ background("yellow").log_ text on _click(); 


这 个 方案 虽然 需要 多 写 几 行 代码 ,但 有 以 下 优点 : 


。 现在 有 了 清晰 地 说 明 用 途 的 函数 

。 如 果 需 要 创建 新 的 .green-alert 类 名 ， 只 需要 修改 定义 好 的 add_background() 和 log_ 
text_on_click 国 数 

。 如 果 需 要 将 console.log($(this).html()); 改 成 console.log($(this).text());， 只 需 
要 在 一 个 位 置 修改 ， 而 不 是 多 个 位 置 




















荆 
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。 可 以 在 项 目 里 的 很 多 地 方 复 用 这 两 个 函数 


就 像 Sass 的 混入 (mixin) 写法 比 原生 CSS 有 更 多 好 处 ， 把 代码 拆 分 为 可 复 用 的 函数 ， 我 
们 的 代码 将 变 得 更 加 清晰 、 精 简 、 灵 活 和 可 测 。 


6.3 小结 


JavaScript 仅仅 用 一 个 章 市 言 之 不 尽 ， 要 讲 完 这 个 话题 需要 写 很 多 本 书 。 这 里 概括 的 技巧 
绝 不 是 架构 项 目 要 考虑 的 全 部 因素 ,但 是 它们 是 非常 好 的 例子 ， 说 明 如 果 没 有 提前 规划 ， 
代码 质量 会 变 成 什么 样 。 这 并 不 是 说 开发 人 员 不 能 独立 写 出 高 质量 代码 ， 而 是 每 个 开发 人 
员 对 好 代码 的 看 法 不 一 致 。 提 前 制定 代码 标准 是 确保 代码 评审 公平 的 唯一 方法 ， 而 且 可 以 
让 开发 人 员 更 清楚 他 们 应 该 如 何 编写 代码 。 
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Red Hat 代 码 





Redhat.com 是 在 2014 年 的 秋天 发 布 的 ， 而 我 在 当年 的 春天 才 加 入 这 个 已 经 进行 了 多 年 的 
项 目 ， 因 此 尽管 对 项 目 发 布 时 的 代码 架构 非常 熟悉 ， 我 却 没 什么 机 会 对 它 做 一 些 大 的 改 
动 。 这 个 项 目 涉及 的 范围 较 广 ， 最 后 期 限 也 迫在眉睫 ， 这 导致 我 伦 了 很 多 时 间 赶 手头 的 工 
作 ， 几 乎 没有 时 间 思 考 手 头 的 工作 是 不 是 团队 真正 需要 的 最 佳 方案 。 

最 后 ， 这 个 网 站 发 布 了 ， 从 各 方面 来 看 都 获得 了 成 功 。 用 户 界 面 友好 ， 网 站 加 载 流 畅 ， 而 
且 几 和平 没 有 人 认为 该 网 站 不 引人入胜 。 但 我 还 记得 那个 决定 性 的 下 午 ， 我 被 问 到 :“ 我 们 
的 设计 是 如 何 模块 化 的 ? 我 们 希望 能 把 主题 的 一 小 部 分 和 其 他 公司 网 站 共享 。 

我 内 心 忍 不 住 暗 暗 笑 了 好 一 会 儿 。 你 看 ， 我 非常 熟悉 这 个 项 目的 所 有 标记 、JavaScript 和 
CSS， 我 也 深 知 这 个 项 目 完 全 就 是 模块 化 设计 的 反面 教材 。 我 们 在 这 个 主题 上 做 了 很 多 出 
色 的 工作 ,但 是 唯 独 没 有 考虑 模块 化 设计 的 问题 。 


4 A 3 
7.1 过 多 的 依赖 
如 果 有 人 想 泻 染 我 们 样式 中 的 某 一 块 内 容 ， 首 先 需 要 加 载 以 下 内 容 。 
Bootstrap CSS: 114KB (未 压缩 ) 
其 实 网 站 本 身 没 怎么 调用 Bootstrap 库 的 代码 ， 但 我 们 编写 所 有 CSS 的 前 提 条 件 都 是 
Bootstrap 已 经 重 置 了 基本 样式 ， 所 以 一 旦 把 这 些 样式 拿 走 ， 整 个 页 面 就 不 能 正常 使 用 了 。 
核心 的 网 站 CSS: 500KB 
虽然 一 般 来 说 ,每 块 内 容 都 有 一 个 单独 的 关联 文件 ， 但 这 个 文件 绝 不 是 这 块 内 容 的 单一 
样式 来 源 。 样 式 不 仅 来 源 位 置 多 样 ， 并 且 常 常 基于 位 置 和 页 面 的 类 被 覆盖 重 写 。 
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7.2 严重 的 位 置 依赖 问题 

这 个 项 目 所 使 用 的 标记 命名 方法 都 是 按照 内 容 块 的 层级 顺序 自 上 而 下 添加 的 。 我 们 有 几 种 
不 同 的 内 容 块 类 型 ， 大 部 分 样式 都 有 固定 的 作用 域 ， 只 能 在 某 个 内 容 块 内 重复 使 用 。 下 面 
是 一 个 极端 的 例子 ， 在 广告 图 版 块 里 有 一 个 H3 标签 ， 














.about-contact .herol .container > 
section.features-quarter > 
section.f-contact h3 


这 个 样式 不 仅 被 局 限 在 一 个 页 面 里 (about-contact)， 而 且 我 们 还 需要 确认 features- 
quarter 部 分 是 容器 标签 的 直接 后 代 ， 这 样 才 不 会 不 小 心 把 样式 添加 到 其 他 部 分 的 元 素 的 
后 代 上 。 这 种 自 上 而 下 的 样式 命名 方法 意味 着 ， 每 次 修改 我 们 都 要 写 一 个 更 长 、 更 具体 的 
选择 器 。 同 时 ， 因 为 标记 顺序 极为 严格 ， 每 块 内 容 都 很 难 重 排 或 替换 。 


当然 ， 我 们 可 以 抽出 一 个 单独 的 组 件 ， 并 把 它 需要 的 所 有 样式 合并 到 一 个 单独 的 文件 里 ， 
但 是 这 么 做 基本 意味 着 完全 重 做 这 个 组 件 里 的 Sass 文件 ， 而 且 这 么 做 也 并 没有 真 的 实现 标 
记 的 模块 化 。 









































于 是 ， 当 我 被 问 及 我 们 的 设计 是 如 何 模块 化 的 而 且 能 不 能 把 样式 分 享 给 其 他 部 门 时 ， 我 只 能 
说 ， 如 果 要 分 享 某 部 分 ， 我 们 就 需要 重 写 那 部 分 的 标记 和 CSS， 同 时 还 得 更 新 网 站 的 标记 。 


我 确信 ， 这 样 与 最 初 设计 方案 背道而驰 的 提议 ， 一 定 会 使 我 的 笑 声 传 出 这 个 房间 。 因 此 你 
就 能 理解 ， 当 他 们 居然 不 仅 同 意 了 ， 而 且 在 新 网 站 代码 被 冻结 的 情况 下 还 给 我 们 几 周 时 间 
去 构建 新 系统 的 时 候 ， 我 为 什么 如 此 惊讶 了 。 所 以 ， 目 前 我 们 有 了 完整 的 设计 、 一 个 非 
常 能 干 的 开发 团队 ， 还 可 以 全 权 创 建 全 新 的 模块 化 、 可 扩展 和 可 持续 的 设计 系统 。 建 好 
之 后 ， 新 系统 将 成 为 一 个 有 名 的 高 负载 的 动态 网 站 。 我 只 想 知道 ， 我 们 什么 时 候 可 以 开 


始 ? ! 


7.3 设计 分 解 


正如 之 前 所 说 的 ， 我 们 原来 采用 的 是 自 上 而 下 的 设计 方法 。 内 容 、 外 观 和 布局 方式 完全 由 
内 容 版 块 决定 。 我 们 有 商标 墙 、 广 告 图 版 块 、 感 言 版 块 、 博 客 广告 ， 以 及 其 他 你 想 要 的 版 
块 。 每 一 个 版 块 里 ， 都 有 自己 的 Sass 文件 ， 并 且 这 部 分 样式 只 能 在 所 属 版 块 名 称 下 生效 。 
在 某 种 程度 上 ， 这 种 方式 还 是 相当 好 用 的 。 通 常情 况 下 ， 你 知道 去 哪里 更 新 特定 版 块 的 样 
式 。 但 问题 是 ， 当 我 们 需要 采用 新 的 设计 或 者 布局 时 ， 就 不 得 不 一 再 新 建 版 块 。 我 们 可 能 
有 完善 的 视觉 语言 ， 但 是 从 来 没有 “翻译 ”成 一 个 可 以 模块 化 生成 设计 样式 的 系统 。 

所 以 ， 我 们 的 首要 任务 是 把 设计 分 解 成 尽 可 能 小 的 单位 。 我 们 知道 ， 一 旦 有 了 建造 设计 系 
统 的 基本 构件 ， 就 可 以 创造 任何 视觉 语言 所 能 传达 的 东西 。 所 以 第 一 步 就 是 细 看 我 们 的 设 
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计 ， 并 且 把 它 分 解 为 可 复 用 的 布局 模式 。 





通过 对 比 几 个 最 常用 的 内 容 块 类 型 ， 我 们 注意 到 它们 大 多 数 都 共用 了 几 种 常见 的 布局 模式 
( 见 图 7-1)。 一 般 它 们 有 带 侧 边栏 的 内 容 ， 有 同样 大 小 的 列 内 容 ， 有 每 行 五 张 的 图 片 集 和 
图 标 集 ， 还 有 带 一 点 内 边 距 和 一 个 背景 图 的 黑色 卡片 和 白色 卡片 。 
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图 7-1: 我 们 的 设计 系统 的 多 种 布局 


我 们 很 快意 识 到 ， 如 果 能 创造 一 种 方法 复 用 这 些 简单 的 布局 模式 ， 我 们 就 可 以 为 网 站 里 的 
每 一 个 内 容 块 生成 布局 。 我 们 不 再 需要 为 商标 墙 和 insights 版 块 分 别 创造 单独 的 布局 。 我 
们 可 以 新 建 有 很 多 可 选 样式 的 版 块 ， 还 可 以 专门 写 一 个 卡片 布局 ， 只 是 加 一 点 内 边 距 ， 再 
为 内 容 添加 黑色 或 白色 的 背景 。 


7.4 组 件 分 类 


我 们 用 之 前 分 解 布局 的 方法 分 解 每 个 布局 的 内 容 ， 然 后 意识 到 只 需要 写 一 些 好 用 的 组 件 小 
工具 就 可 以 模块 化 地 生成 大 部 分 内 容 了 。 





相 比 布局 ， 组 件 只 描述 了 一 小 块 内 容 的 视觉 外 观 。 组 件 很 灵活 ， 没 有 任何 背景 、 宽 度 、 内 
边 距 、 外 边 距 等 设置 。 
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实践 证 明 ， 布 局 和 组 件 之 间 的 关系 有 着 强大 的 威力 ， 我 们 把 三 个 组 件 放 在 一 个 三 列 布局 
中 ， 不 需要 写 代 码 就 能 让 它们 看 起 来 浑然 一 体 。 每 个 组 件 都 会 填 满 所 在 列 的 列 宽 ， 第 一 列 
里 的 引用 文字 和 第 二 列 博客 入 口 文 字 以 及 第 三 列 的 图 片 都 自动 水 平 对 齐 了 ( 见 图 7-2)。 























The multimaster replication was a huge 
issue for us previously. Red Hat Directory D evO ps at t h e Red 
Server has solved that completely. Students, H at S umm it 
faculty, and staff [can] make password 
changes effectively and securely so they can 


focus on their work. DevOps promises to deliver better 


software faster, but it is not a product 
that you can buy and install. Instead, it is 
like open source: a better way to create 
software through a combination of 
culture, practices, and technologies. And, 


INNOVATION 


at Red Hat, we bring to DevOps the best 
of what open source offers. 














图 7-2: 因为 组 件 都 没有 上 边 距 ， 所 以 图 中 三 个 不 同 的 组 件 对 齐 了 

















当 意 识 到 这 个 强大 的 系统 是 基于 一 些 简 单 也 非常 重要 的 规则 和 关系 时 ， 我 们 把 它们 整理 成 
更 加 正式 的 形式 。 我 们 希望 确保 当 新 的 布局 和 组 件 引 入 到 系统 中 时 ， 每 一 次 的 合并 请 求 都 
符合 一 系列 的 规则 。 我 们 称 这 些 规则 为 “BB 鸟 规则 。 

















7.5 _BB 乌 规则 


在 思考 这 些 新 规则 之 前 ， 我 的 Twitter 被 Chuck Jones 的 故事 和 他 的 九条 规则 的 列表 刷 爆 了 ， 
据说 这 些 规则 是 写 给 BB 鸟 动画 片 的 作家 和 动画 师 的 。 在 BB 鸟 的 世界 里 ， 这 个 列表 设 定 了 
一 些 规 则 ， 比 如 “BB 鸟 不 能 伤害 牌 心 狼 ， 除 非 听 到 了 “ 哗 哗 “永远 没有 对 话 ， 除 非 听 到 
了 “ 轮 哗 “。 这 些 规 则 帮助 每 集 动画 的 作者 和 动画 师 创 造 一 致 的 、 有 凝聚 力 的 作品 。 






























































不 管 这 个 故事 是 否 真实 ， 我 想 给 自己 的 团队 塑造 的 就 是 这 样 一致 的 、 有 凝聚 力 的 状态 。 为 
了 避免 写 出 类 似 “ 迅 猛 的 BB 鸟 撞 到 了 牌 心 狼 的 下 巴 ， 接 着 听 到 牌 心 狼 喊 叫 “ 你 抓 不 到 我 ， 
傻瓜 ! ”的 情节 ， 我 想到 的 唯一 办 法 就 是 从 中 提取 出 管理 设计 系统 的 规则 ， 得 到 一 个 精 
简 的 、 好 用 的 BB 鸟 规则 。 


7.6 编写 你 自己 的 规则 


我 刚 开 始 编写 BB 鸟 规则 时 ， 规 则 数目 是 现在 的 两 倍 。 而 当 规则 数目 达到 了 两 位 数 ， 我 发 
现 每 写 一 条 规则 ， 我 都 会 想 出 两 条 、 三 条 甚至 更 多 的 规则 。 



































等 做 完 这 么 多 规则 ， 佑 计 花 都 谢 了 。 我 意识 到 我 根本 不 是 在 制定 规则 ， 而 是 在 写 整个 系统 
的 说 明文 档 ， 然 而 问题 是 我 已 经 写 过 文档 了 。 








事实 上 ， 我 并 不 需要 为 牌 心 狼 受 伤 倒 下 的 结局 ， 详 细 地 描述 牌 心 狼 如 何 从 最 大 的 分 类 开始 
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查找 、 选 购 商 品 ， 然 后 几 秒 钟 后 商品 就 出 现在 他 的 信箱 里 。 我 只 需要 规定 “没有 外 力 可 以 
伤害 牌 心 狼 ， 除 非 他 很 笨 或 是 他 买 的 高 科技 产品 出 故障 。 

我 需要 的 是 精简 的 、 固 定 的 规则 列表 ， 而 不 是 一 个 完全 展开 的 详细 说 明 。 很 显然 ， 我 还 需 
要 一 些 规范 来 约束 规则 的 制定 。 

现在 我 知道 ， 你 大 概 在 想 “ 这 要 么 是 过 分 的 分 解 ， 要 么 是 思春 的 莹 试 ” 。 但 是 就 像 一 个 好 
看 的 导航 条 会 有 它 独 特 的 设计 和 规则 ， 一 个 扎实 的 数据 写 入 模式 也 是 按照 父 模式 的 规范 写 
的 ， 我们 的 BB 鸟 规则 也 需要 遵循 它 自己 的 管理 规范 。 


下 面 就 是 我 们 制定 BB 鸟 规则 时 需 遵循 的 规范 : 























。 只 包含 不 可 变 的 规则 ， 而 不 是 笼统 的 说 明 

。 总 是 把 规则 提炼 成 最 简单 的 表达 

。 总 是 首先 说 明 规则 是 什么 ， 再 说 明 “ 如 果 不 这 样 ， 那 么 会 如 何 ” 

。 每 个 规则 必须 包含 以 下 词 中 的 一 个 一 一 总 是 、 永 远 不 要 、 只 有 、 每 一 个 、 不 要 、 要 



































使 用 这 些 规则 可 以 帮助 我 们 避免 写 了 很 多 内 容 却 始终 说 不 到 点 子 上 。 聪 明 的 读者 已 经 发 现 
这 四 条 规则 和 BB 鸟 的 设计 原则 是 相 吻 合 的 。 


在 对 这 个 列表 进行 了 改写 、 重 写 、 删 除 等 操作 后 ， 我 们 最 后 制定 了 自己 的 设计 系统 的 规则 
列表 。 


。 永远 不 要 给 布局 的 子 内 容 强加 内 边 距 和 元 素 样式 。 布 局 只 关注 垂直 对 齐 、 水 平 对 齐 和 文 
字 间 距 。 

。 主题 和 别 的 数据 属性 值 永远 不 要 强制 改变 外 观 ， 它 们 必须 保持 布局 、 组 件 和 元 素 可 以 应 
用 于 其 上 。 

。 组 件 总 是 贴 着 它 的 父 容器 的 四 个 边 ， 元 素 都 没有 上 外 边 距 和 左 外 边 距 ， 所 有 的 最 后 节点 
(最 右边 和 最 下 边 的 节点 ) 的 外 边 距 都 会 被 清除 。 

。 组 件 本 身 永远 不 要 添加 背景 、 宽 度 、 浮 动 、 内 边 距 和 外 边 距 的 样式 ， 组 件 样 式 是 组 件 内 
元 素 的 样式 。 

。 每 个 元 素 都 有 且 只 有 一 个 唯一 的 且 作 用 域 只 在 组 件 内 的 CSS 类 名 。 所 有 的 样式 都 是 直 
接应 用 到 这 个 选择 器 上 ， 并 且 只 有 上 下 文 和 主题 能 修改 元 素 的 样式 。 

。 永远 不 要 在 元 素 上 使 用 上 外 边 距 ， 第 一 个 元 素 总 是 贴 着 它 所 在 组 件 的 顶部 。 

。 JavaScript 永远 不 要 绑 定 任 何 元 素 的 CSS 类 名 ， 选 中 元 素 通 过 数据 属性 实现 。 





























这 些 规则 不 仅 覆 盖 了 布局 和 组 件 的 特定 关系 ， 也 覆盖 了 设计 系统 的 其 他 部 分 ， 包 括 主题 、 
元 素 和 JavaScript。 接 下 来 ， 我 们 深入 到 我 们 做 过 的 一 些 关 于 HTML 和 CSS 的 更 有 趣 的 
规定 。 
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7.7 每 个 标签 指定 唯一 的 选择 器 

过 去 ， 我 花费 了 太 多 时 间 创 造 通用 的 、 万 能 的 、 可 以 应 用 到 任意 元 素 上 的 CSS 类 。 但 是 当 
项 目 发 展 壮 大 时 ， 你 才 会 明白 维护 它们 有 多 难 。 因 为 这 些 CSS 类 具有 通用 性 ， 改 动 了 样式 
有 可 能 会 影响 到 很 多 地 方 ， 所 以 创造 新 的 CSS 类 往往 比 更 新 原 有 的 CSS 类 更 容易 。 因 此 ， 
给 每 一 个 元 素 创造 单一 的 、 唯 一 的 、 扁 平 的 CSS 类 是 我 最 想 做 的 事情 之 一 。 你 可 以 在 第 6 
章 读 到 很 多 与 此 相关 的 内 容 ， 而 这 个 原则 是 我 们 履行 “每 个 元 素 都 有 且 只 有 一 个 唯一 的 、 
作用 域 只 在 组 件 内 的 CSS 类 名 ”规则 的 关键 。 

















7.7.1 单一 责任 原则 

在 某 些 领域 ，CSS 的 单一 责任 原则 意味 着 每 个 CSS 类 都 有 一 个 简单 的 、 高 度 聚 焦 的 责任 ， 
所 以 在 某 个 场景 下 ， 用 一 个 CSS 类 来 设置 元 素 的 盒 模型 的 属性 ， 另 一 个 设置 排版 ， 还 有 一 
个 设置 颜色 和 背景 。 








对 于 设计 系统 和 规则 列表 来 说 ， 这 个 单一 责任 原则 意味 着 我 们 创建 的 每 一 个 CSS 类 都 用 于 
单一 的 目的 和 单一 的 位 置 。 因 此 ， 如 果 我 们 要 改变 .rh-standard-band-title 的 样式 ， 我 相 
信 这 对 网 站 唯一 的 影响 是 rh-standard-band 里 面 的 标题 外 观 会 改变 。 


这 也 意味 着 如 果 删 除 rh-stand-band 的 样式 ， 即 使 我 们 删除 所 有 关联 的 CSS， 也 不 用 
担心 因为 被 “强制 依赖 ”劫持 而 影响 其 他 组 件 的 样式 。 我 会 确保 每 个 CSS 类 只 为 一 个 
目的 而 创建 ， 也 只 会 用 于 这 一 个 目的 ， 因 为 我 们 不 想 滥 用 级 联 的 选择 器 (https://www. 
phase2technology.com/blog/used-and-abused-css-inheritance-and-our-misuse-of-the-cascade/) ， 
参见 图 7-3。 



































FEATURED TOPIC BAND 


] IElements| Network Sources Timeline Profiles Resources Audits Console » @55 并 党 口 ， X 
<div class="rh-standard-band-container"> 


| i » 
了 <header class="rh-standard-band-header"> Styles 医 9mRILESREEDE SLS 


<h2 class="rh-standard-band-title"> ‘rh-standard-band-— title~extends,.scss:1 
Featured Topic Band title, .rh-horizontal-tabs-title, .rh- 
</h2> vertical-tabs-title, .rh-band-header— 
<h1 class="rh-standard-band- title, .rh-training-method-title, .rh- 
headline">This is a Band HeadLine</h1> section-title { 
</header> font-size: 1.22222em; 
p<div class="rh-standard-band-content" margin-bottom: 0.90909em; 
data-rh-Layout="9 3">..</div> text-transform: uppercase; 
Pp <footer class="rh-standard-band-footer"> font-weight: 800; 
.</footer> font-family: "0verpass"，0verpass， 
: :after 4 helvetica, arial, sans- 
> serif; 
A color: 国 #cc0000; 
px margin-top: 0; 
</div> line-height: 1.4; 
</div> } 
</div> 














图 7-3: 每 个 CSS 类 只 为 单一 目的 而 创建 
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7.7.2 ”样式 只 有 单一 的 来 源 

一 且 页 面 的 每 个 元 素 都 只 有 唯一 的 CSS 类 ， 我 们 就 可 以 非常 自信 地 改变 .rh-standard- 
band-title 而 不 用 担心 影响 系统 的 其 他 部 分 。 但 是 .rhstandard-band-titte 不 会 被 别 的 东 
影响 又 意味 着 什么 呢 ? 这 就 是 给 每 个 组 件 和 每 个 元 素 的 样式 保持 单一 来 源 非常 重要 的 原 
因 。 这 意味 着 标签 不 依赖 于 H2、header H2 或 者 绑 定 的 Sass 文件 之 外 的 其 他 任何 选择 器 。 


这 并 不 是 说 我 们 的 标题 不 能 被 外 力 所 改 变 ， 而 是 说 ， 修 饰 符 与 上 下 文 对 标签 样式 的 任何 改 
变 都 会 和 标签 的 原始 样式 定义 在 同一 个 地 方 ， 而 不 会 分 散在 不 同文 件 。 因 此 ， 当 我 需要 使 
用 类 似 .some-context .rh-standard-band-title 的 样式 时 ， 我 总 是 要 把 样式 写 在 标准 绑 定 
Sass 文件 里 ， 永 远 不 会 写 在 别 的 地 方 。 


7.7.3 可 选 的 修饰 符 
我 提 到 过 ， 我 对 在 组 件 上 使 用 修饰 符 没有 异议 ， 但 是 每 一 个 单独 的 样式 变更 ， 都 需要 做 成 
可 选 。 这 意味 着 如 果 我 定义 了 一 个 修饰 符 A 给 组 件 B， 那 么 修饰 符 A 不 会 影响 任何 组 件 
C， 除 非 C 也 选用 了 这 个 修饰 符 。 






































在 深入 探讨 例子 之 前 ， 我 解释 一 下 我 做 过 的 一 个 关于 修饰 符 和 上 下 文 的 架构 选择 。 虽 然 
BEM、SMACSS 和 OOCSS 都 有 关于 修饰 符 、 主 题 、 皮 肤 的 规定 ， 但 它们 都 需要 添加 变更 
的 CSS 类 到 内 容 块 或 者 元 素 上 ， 而 我 却 决定 用 一 个 不 一 样 的 不 需要 添加 额外 的 CSS 类 的 
新 方案 。 正 如 Ben Frain (https://benfrain.com/oocss-atomic-css-responsive-web-design-anti- 
pattern/) 所 说 的 那样 ,，“ 让 一 件 东西 只 是 它 本 身 ”。 我 不 想 让 任何 人 混淆 “ 某 个 东西 ”的 
CSS 类 和 它 的 修饰 符 。 所 以 我 决定 所 有 的 修饰 符 都 用 数据 属性 代替 ， 如 下 : 

















<div class="foo" data-bar="baz">...</div> 


除了 能 够 区 分 角色 和 目的 ， 这 么 做 的 另 一 个 好 处 是 ，CSS 类 的 属性 都 是 一 维 的 : 应 用 状态 
或 非 应 用 状态 。 而 数据 属性 是 二 维 的 ， 有 数据 属性 本 身 和 通过 它 传 递 的 值 。 为 了 补偿 CSS 
类 缺少 的 维度 ， 你 会 经 常 发 现 CSS 类 会 使 用 命名 空间 来 定义 该 标签 属于 哪个 分 组 。 一 个 数 
据 属性 有 明确 的 命名 空间 ， 因 此 我 们 可 以 给 它 传递 任何 必要 的 值 。 虽 然 传递 的 值 可 能 只 是 
几 个 字符 ， 但 使 用 数据 属性 本 身 就 能 够 强调 组 件 拥 有 data-align 属性 ， 并 且 我 们 可 以 给 它 
赋 各 种 各 样 的 值 。 


好 ， 现 在 我 们 回 到 那个 例子 上 来 。 
































rh-card--Layout 是 用 来 给 内 容 添 加 内 边 距 和 篆 景 的 布局 工具 。 这 个 卡片 ( 见 图 7-4) 有 一 
个 黑色 背景 ， 因 为 我 们 定义 了 data-rh-theme="dark" 的 属性 含义 为 在 卡片 Sass 文件 里 将 卡 
片 的 背景 色 设置 为 黑色 。 就 像 我 们 定义 data-rh-justify="center" 的 含义 为 将 卡片 内 容 居 
中 一 样 。 
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CALLTO ACTION 


Elements 














7-4: 一 个 带 黑色 背景 和 深 色 主题 的 基本 卡片 


<!-- Card.scss --> 
.rh-card--layout { 
padding: 30px; 
&[data-rh-theme="light"]{ 
background: white; 


} 
&[data-rh-theme="dark"]{ 
background: black; 


} 
&[data-rh-justify="center"]{ 


} 
&[data-rh-justify="top"]{ 


} 
&[data-rh-justify="justify"]{ 


i 
} 


除了 center (居中 对 齐 )， 我 们 还 指定 其 他 对 齐 的 值 


























(两 端 对 齐 )， 见 图 7-5。 





， 包 括 top (顶部 对 齐 ) 和 justify 
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CALLTO ACTION 


Elements | 


t" data-rh-theme="dark 














图 7-5: 一 个 内 容 垂 直 对 齐 的 卡片 


因此 ， 只 使 用 数据 属性 的 切换 ， 我 们 就 可 以 根据 具体 卡片 的 Sass 文件 的 值 ， 切 换 卡 片 
的 外 观 。 


现在 还 有 一 个 属性 我 们 没有 在 卡片 的 Sass 文件 里 定义 ， 那 就 是 对 齐 。 通 常 ， 我 们 以 左 / 右 
/居中 对 齐 作为 选项 ， 通 过 添加 data-rh-align 属性 给 某 个 组 件 添加 对 齐 样式 ， 因 此 我 们 在 
这 里 有 意 不 使 用 该 属性 。 这 意味 着 不 管 其 他 组 件 或 布局 使 用 了 什么 样 的 修饰 符 ， 都 不 会 对 
卡片 产生 影响 ( 见 图 7-6)。 
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CALLTO ACTION 


Elements N 


aiEEE 
class 1 
data-rh-justify=”"just data-rh-aLign="rig 











图 7-6: 这 个 卡片 不 受 没 有 明确 规定 的 属性 影响 


7.7.4 可 选 的 上 下 文 
我 们 的 设计 系统 有 一 个 磨 宛 : 一 个 组 件 无 论 放 在 哪里 ， 都 呈现 一 样 的 外 观 。 但 我 们 希望 组 
件 不 仅 可 控 并 具有 一 致 性 ， 而 且 智 能 和 灵活 。 这 就 是 我 们 想 出 了 上 下 文 样式 的 原 


上 下 文 样式 的 含义 是 ， 组 件 可 以 根据 所 在 的 父 级 元 素 或 者 父 级 元 素 的 某 些 数据 属性 来 改变 
自身 的 表现 。 回 到 侧 边栏 标题 的 例子 ， 我 们 并 不 是 把 所 有 的 侧 边栏 的 H2 字体 都 设置 为 绿 
色 ， 而 是 当 我 们 需要 .widget-title 的 标题 在 侧 边 栏 里 显示 绿色 的 时 候 ， 我 们 可 以 做 到 这 
一 点 ! 让 我 们 再 次 看 看 卡片 的 例子 。 


在 这 张 卡片 里 ，data-rh-theme ee 也 是 上 下 文 。 它 作为 修饰 符 把 卡 
片 的 背景 从 黑色 变 成 白色 〈 见 图 7-7) ， 但 是 对 于 里 面 的 元 素来 说 它 也 是 一 个 上 下 文 信息 。 




















Ba 
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CALLTO ACTION 


Elements N 


“0 C C out” data-rh-theme="dark 
data—rh-—]j 日 生 0 











7-7: 这 个 深 色 主 题 的 卡片 有 一 个 白色 的 图 标 





当主 题 从 黑色 切换 成 白色 ， 你 可 以 看 到 不 仅 背 景 颜色 变 了 (修饰 符 ) ， 图 标 颜 色 也 从 白色 
变 成 了 黑色 ( 见 图 7-8)。 但 我 并 不 是 指 新 的 主题 强制 把 所 有 子 节 点 的 文字 都 改变 了 颜色 
(标题 和 按钮 的 颜色 根本 没有 改变 ) ， 而 是 这 个 改变 对 于 图 标 来 说 是 可 选 样式 ， 可 选 样式 的 
信息 都 会 写 在 Link-tile 的 Sass 文件 中 ( 见 图 7-9)。 






































这 些 可 选 的 上 下 文 允 许 我 们 给 任何 组 件 创建 变动 ， 而 不 影响 组 件 的 原始 样式 。 这 些 变动 都 
是 可 控 的 ， 作 用 域 限 制 在 组 件 的 CSS 类 中 ， 并 且 只 在 组 件 的 Sass 文件 里 定义 。 


























如 有 果 让 同一 个 修饰 符 和 上 下 文 影响 多 个 组 件 ， 这 的 确 需要 我 们 做 一 些 重复 的 工作 。 但 随 着 
系统 规模 日 渐 扩展 ， 我 从 来 没有 后 悔过 。 不 仅 因 为 通过 混入 (mixin) 和 扩展 (extend) 让 
复 用 修饰 符 和 上 下 文 变 得 更 简单 ， 而 且 组 件 变动 的 数量 有 限 ， 这 帮助 我 们 避免 了 找 错 难 的 
问题 ， 也 帮助 我 们 提高 了 创造 更 全 面 的 视觉 还 原 的 能 力 。 因 为 所 有 修饰 符 和 上 下 文 都 定义 
在 Sass 文件 里 ， 所 以 我 们 可 以 查看 任意 组 件 ， 确 切 地 知悉 其 可 能 的 视觉 变化 。 
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ALINK TILE 


A short summary that leadsto a 
larger story. 


CALLTO ACTION 





Elements Ne 


iv class="exampleContainer 
(efl re i rh=-card--Layout”data=-rh=-theme=" Light 
data—rh—justify="justify">..</0C 











图 7-8: 这 个 浅 色 主题 的 卡片 有 一 个 黑色 的 图 标 





[data-rh-theme~="dark"] 

.rh—link-tile-icon { 
coLor: 国 white; 

} 











图 7-9: 在 深 色 主 题 下 图 标 配合 显示 白色 





[data-rh-theme~="Light”] 
.rh—link-tile-icon { 


COLOr: #252527;，; 











图 7-10: 在 浅 色 主题 下 图 标 配合 显示 黑色 
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7.8 语义 化 的 网 格 


随 着 组 件 的 基础 变 得 坚实 ， 我 们 需要 做 的 下 一 件 事 是 弄 清 楚 如 何 把 它们 合并 成 多 种 不 一 样 
的 布局 。 过 去 ， 当 模块 数量 比较 少时 ， 我 们 会 给 每 个 版 块 写 样式 ， 包 括 版 块 的 布局 。 如 果 
要 做 一 个 充满 商标 的 版 块 ， 我 们 会 给 这 个 版 块 一 个 CSS 类 名 称 ， 然 后 明确 地 给 这 个 版 块 应 
用 一 个 布局 。 这 个 方案 的 问题 是 ， 除 了 整个 版 块 其 他 的 都 不 可 复 用 。 所 以 如 果 有 别 的 版 块 
用 到 了 相同 的 布局 但 不 同 的 内 容 ， 我 们 就 不 得 不 创建 一 个 全 新 的 版 块 以 及 重 写 布局 样式 。 














所 以 ， 现 在 我 们 把 商标 墙 拆 分 成 图 片 集 、 按 钮 和 标题 ， 希 望 模块 布局 任何 时 候 都 能 复 用 。 
这 意味 着 要 把 布局 放 回 DOM， 这 正 是 我 们 舍弃 bootstrap 网 格 布局 时 强烈 抗拒 的 事情 。 














幸运 的 是 ，bootstrap 网 格 布 局 容器 、 行 容器 和 列 容 器 ， 需 要 应 用 到 .logo-wall 版 块 的 特定 
布局 ， 以 及 其 他 任何 需要 布局 的 新 的 内 容 组 合 。 











我 们 的 解决 方案 是 ， 创 造 一 组 可 以 通过 数据 属性 的 值 来 应 用 的 常用 网 格 布局 方式 ( 见 图 
7-11)。 只 要 在 父 市 点 的 标签 上 设置 布局 属性 ， 所 有 的 子 标签 都 会 应 用 相应 的 网 格 布局 类 
型 。 这 种 方法 让 我 们 不 仅 可 以 将 布局 和 组 件 分 离开 ， 同 时 还 可 以 在 标记 上 设置 网 格 布局 。 
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ICT 
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Elements 
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Class 
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图 7-11: 一 个 单独 的 数据 属性 让 我 们 可 以 在 一 大 组 图 片上 设置 布局 


前 面 的 例子 里 ， 你 可 以 看 到 我 们 给 版 块 内 容 区 域 (版 块 里 的 一 个 主要 内 容 区 域 ) 应 用 了 一 
个 data-rh-Layout 属性 。 这 个 属性 再 一 次 体现 了 数据 属性 在 组 织 大 量 内 容 /数据 的 情况 下 
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是 多 么 有 优势 。 只 用 了 一 个 属性 ， 我 们 就 能 传递 多 个 不 一 样 的 布局 ， 来 设置 子 组 件 的 宽度 
和 外 边 距 。 





在 这 个 例子 里 ， 传 人 了 gattery5 属性 以 后 ，CSS 样式 给 所 有 的 子 节点 应 用 了 大 致 20% 的 
宽度 。 通 过 在 父 元 素 的 标签 上 标 设置 好 所 有 的 网 格 信息 ， 我 们 就 可 以 将 不 同 的 组 件 内 容 组 
合 起 来 放 在 一 个 内 容 区 域 中 ， 而 不 需要 另外 添加 CSS 类 或 者 把 组 件 放 在 额外 的 行 容器 、 列 
容器 里 。 因 此 ， 当 我 们 想 把 商标 墙 从 5 列 改 成 4 列 ， 唯 一 需要 做 的 事情 就 是 在 父 标 签 上 变 
更 一 个 属性 ( 见 图 7-12)。 
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ICT 


EsSART CASIO. 


Elements 














图 7-12; 改变 了 单一 的 数据 属性 ， 我 们 就 可 以 改变 这 些 商标 的 布局 


现在 ， 我 们 已 经 可 以 通过 变更 一 个 属性 来 修改 整个 版 块 的 布局 了 。 我 们 再 也 不 必 不 断 地 写 
新 的 CSS (实现 了 模块 化 ) 了 ， 也 不 必 再 给 内 容 添 加 CSS 类 (实现 了 语义 化 ) 了 。 一 箭 双 
雕 | 现在 我 们 有 一 个 图 片 集 清单 和 12 列 (66、3 9、444 等 ) 的 普通 布局 组 合 ， 它 们 涵盖 
了 我 们 需要 创建 的 99% 的 布局 。 如 果 需 要 一 些 更 独特 的 布局 ， 我 们 可 以 创建 一 个 自 定义 的 
网 格 布局 ， 写 好 说 明 ， 让 任何 人 都 可 以 应 用 到 他 们 的 内 容 上 。 




















如 今 ， 我 们 已 经 有 了 一 组 模块 化 的 和 可 定制 的 容器 ， 这 组 容器 可 以 容纳 我 们 的 组 件 ， 同 时 
给 组 件 应 用 布局 。 之 后 我 们 就 可 以 建立 商标 墙 、 专 题 活动 、 博 客 广告 以 及 网 站 所 需要 的 其 
他 所 有 版 块 了 。 
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第 三 部 分 
流程 核心 





流程 核心 的 意义 在 于 清晰 地 定义 前 端 代码 从 开发 人 员 的 脑海 到 用 户 的 浏览 器 所 需要 经 历 的 
各 个 步 又。 流程 包 售 了 开发 过 程 的 各 个 环节 ， 从 合理 的 想法 到 可 行 的 设计 ， 到 有 效 的 提 
交 ， 再 到 最 终 的 部 署 。 























如 果 你 从 事前 端 开发 的 时 间 足 够 长 ， 你 可 能 注意 到 ， 在 过 去 的 儿 年 内 ， 我 们 的 工作 流 已 经 
发 生 了 巨大 的 变化 。 我 第 一 次 做 Web 开发 是 通过 两 个 月 的 邮件 交流 来 理解 客户 的 需求 ， 然 
后 通过 FTP 登录 他 们 的 服务 器 ， 对 网 站 代码 做 必要 的 修改 的 。 


现在 看 来 ， 这 种 更 新 网 站 代码 的 方式 非常 糟糕 。 如 果 我 误解 了 邮件 的 内 容 ， 改 错 了 代码 ， 
会 发 生 什 么 呢 ? 如 果 我 不 小 心 删 掉 了 一 大 片 CSS 代码 ， 又 不 小 心 破坏 了 网 站 上 的 其 他 页 
面 呢 ? 如 果 我 改 掉 一 个 JavaScript 的 pug， 但 又 引发 另外 两 个 bug 呢 ? 这 些 问题 十 分 棘手 ， 
而 这 也 是 永远 都 不 要 用 FTP 直接 修改 代码 的 重要 原因 。 如 果 你 没有 经 常备 份 ， 现 在 需要 修 
复 一 个 损坏 的 网 站 ， 而 且 还 有 一 堆 任务 等 着 你 去 做 ， 那 么 结果 会 怎样 呢 ? 


幸运 的 是 ， 我 们 大 多 数 人 已 经 从 这 些 错 误 中 吸取 了 教训 ， 现 在 遵循 着 更 先进 的 方法 。 跟 之 
前 通过 FTP 的 方式 来 修改 邮件 中 提 到 的 各 种 改动 不 同 ， 现 在 我 们 采取 的 方法 如 下 。 




































































(1) 使 用 事件 跟踪 和 用 户 故 事 来 正确 地 跟踪 工作 流 和 标记 那些 完成 了 的 任务 。 
(2) 搭建 开发 环境 来 测试 代码 。 

(3) 构建 部 署 流 程 ， 用 于 编译 、 验 证 和 测试 代码 。 

(4) 在 任何 代码 被 采纳 之 前 ， 都 要 获取 需求 方 的 反馈 。 

(5) 把 提交 的 代码 推送 到 中 心 代码 仓库 。 
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(6) 采用 这 样 一 个 部 署 系统 : 可 以 无 缝 地 添加 一 些 新 代码 到 生产 环境 ， 在 需要 的 时 候 ， 还 
可 以 回 滚 这 些 代 码 来 恢复 系统 原来 的 功能 。 


准备 好 实践 这 些 方法 了 吗 
作为 前 端 架构 师 ， 你 经 常 需要 制定 ， 或 至 少 能 够 掌控 以 上 所 列 的 每 一 项 内 容 。 流 程 中 的 任 


何 一 个 环节 出 现 问 题 ， 都 会 迅速 演变 为 开发 人 员 的 痛苦， 或 者 导致 网 站 无 法 持续 满足 用 户 
要 求 ， 其 至 月 涡 。 





正如 前 面 的 章节 所 说 ， 前 端 架构 师 的 用 户 是 开发 人 员 。 我 们 所 选择 的 工具 、 编 写 的 代码 、 
创建 的 流程 ， 都 是 为 了 让 开发 人 员 能 够 构建 出 最 高 效 的 、 不 出 错 的 、 可 扩展 的 和 可 持续 优 
化 的 系统 。 




















在 这 一 部 分 ， 我 们 会 从 一 个 更 高 的 视角 看 看 如 何 更 好 地 武装 新 的 开发 人 员 ， 让 他 们 更 快 地 
上 上手。 我们 会 深入 了 解 他 们 是 如 何 把 需求 转化 为 实际 代码 的 ， 以 及 代码 产生 的 流程 。 然 后 
我 们 会 讨论 这 些 流 程 的 核心 一 一 任务 处 理 器 的 角色 ， 以 及 它们 如 何 帮助 我 们 用 更 少 的 时 间 
创造 更 好 的 代码 。 
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第 8 和 章 


工作 流 





流程 的 核心 是 工作 流 。 工 作 流 指 的 是 把 想法 变 成 现实 的 过 程 ， 或 者 从 产品 的 角度 来 看 ， 
就 是 解决 bug、 需 求 从 代 的 一 系列 流程 和 方法 。 然 而 ， 前 端 工作 流 不 是 凭空 产生 的 ， 关 键 
是 要 结合 整个 团队 的 实际 情况 ， 在 实际 的 开发 情景 中 不 断 细 化 ， 从 而 制定 出 适合 自己 的 
工作 流 。 


NA ~ 
8.1 过 去 的 开发 工作 流 
对 此 ， 我 一 定 抱 怨 过 无 数 次 了 ， 但 仍 有 必要 再 次 说 明 。 不 要 使 用 图 8-1 那样 的 方式 作为 你 
的 开发 工作 流 。 单 纯 地 对 着 PSD 文件 编写 一 堆 标记 的 时 代 已 经 过 去 、 结 束 甚至 死亡 了 ， 而 
且 最 好 埋葬 在 一 个 再 也 不 会 有 人 发 现 的 地 方 。 前 端 开 发 不 是 为 了 在 一 堆 混 乱 的 HTML 代码 
上 添加 漂亮 的 样式 ， 我 们 也 不 是 仅仅 为 了 把 页 面 弄 得 更 漂亮 。 






































图 8-1: 过 去 的 开发 工作 流 
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8.2 现代 的 开发 工作 流 


过 去 的 工作 流 是 根据 角色 逐 级 交付 的 ， 由 产品 负责 人 交 给 体验 设计 师 ， 投 入 具体 的 开发 之 
后 再 由 视觉 设计 师 交 给 前 端 工 程 师 。 然 而 ， 现 代 的 工作 流 则 完全 相反 。 为 了 创建 高 性 能 
响应 式 、 易 用 性 高 的 网 站 ， 我 们 必须 把 以 前 的 工作 流 抛 诸 脑 后 。 这 样 一 来 ， 我 们 就 得 到 了 
类 似 图 8-2 的 工作 流 。 





Ne 

















图 8-2: 现代 的 开发 工作 流 


8.2.1 需求 

工作 流 一 般 是 从 收集 需求 开始 的 ， 因 为 只 有 这 样 我 们 才能 够 定义 出 项 目 内 容 和 衡量 项 目 成 
败 的 标准 。 新 旧 工 作 流 的 关键 区 别 在 于 需求 所 面向 的 人 群 变 了 ， 其 中 包括 交互 设计 、 视 觉 
设计 、 后 端 开发 ， 以 及 前 端 开 发 人 员 。 这 样 一 个 来 自 交 又 领 域 的 团队 ， 意 味 着 我 们 将 会 注 
重创 建 一 个 完整 的 终端 解决 方案 ， 而 不 仅仅 是 一 个 大 概 的 线 框图 或 者 一 个 静态 的 页 面 。 


通过 让 这 四 个 领域 的 人 员 共 同 参与 需求 收集 的 过 程 ， 我 们 可 以 更 早 地 发 现 需求 中 存在 的 问 
题 和 不 足 。 因 为 我 们 经 常 等 到 开发 工作 已 经 完成 或 者 项 目的 交付 日 期 马上 到 来 的 时 候 ， 才 
发 现代 码 次 序 错乱 、 影 响 性 能 的 设计 或 者 精 糕 的 用 户 体验 等 问题 。 





















































8.2.2 ”原型 设计 
跟 以 往 每 个 环节 直接 交付 一 个 成 品 不 同 ， 新 的 工作 流 注重 在 用 户 交互 模型 、 视 觉 设计 和 前 
端 解决 方案 中 持续 迭代 

原型 设计 提供 了 一 个 讨论 和 反馈 的 公共 空间 ， 它 把 直 满 的 想法 实现 在 桌面 和 手机 浏 览 器 
中 。 在 原型 中 ， 想 法 可 以 成 型 、 握 弃 、 重 抢 、 打 磨 。 一 旦 开发 人 员 和 产品 负责 人 对 这 个 原 
型 满意 ， 那 么 它 就 可 以 被 采纳 了 。 
直到 原型 〈 制 作成 本 低 而 修改 方便 ) 被 确认 采纳 ， 我 们 才 进 入 开发 环节 (制作 成 本 高 而 不 
灵活 )。 




















8.2.3 程序 开发 

在 这 个 环节 ， 我 们 的 需求 可 以 实现 得 更 加 容易 和 有 顺利。 不仅 是 因为 我 们 从 一 个 经 过 充分 验 
证 的 设计 开始 ， 而 且 此 时 我 们 已 经 拥有 了 实现 这 个 设计 所 需要 的 全 部 标记 。 开 发 人 员 的 工 
作 就 是 收集 和 处 理 来 自 数据 库 的 数据 ， 然 后 把 它们 放置 到 对 应 的 标记 上 。 开 发 人 员 几 乎 不 











58 | 第 8 章 
图 灵 社 区 会 员 leezom(superjavaman.zhangli@gmail.com) 专 享 尊重 版 权 


需要 给 标记 添加 额外 的 类 ,或 者 去 掉 一 个 容器 div， 或 者 调整 代码 的 顺序 ， 因 为 所 有 的 迭 
代 和 测试 工作 都 在 原型 阶段 完成 了 。 


在 你 的 项 目 中 ， 如 果 原 型 和 网 站 共用 一 套 CSS 和 JavaScript， 那 么 开发 人 员 应 该 完成 一 个 
功能 完整 、 样 式 齐全 、 交 互 良好 、 响 应 及 时 、 通 过 检查 和 达到 标准 的 产品 。 原 型 设计 不 仅 
有 助 于 开发 团队 达到 这 一 目标 ， 对 于 测试 团队 也 是 一 个 好 消息 。 以 往 测 试 人 员 要 参照 传统 
的 、 其 至 已 经 过 时 的 需求 文档 ， 来 判断 开发 工作 是 否 正确 ， 如 今 他 们 可 以 根据 原型 设计 这 
个 黄金 准则 来 一 步 步 地 检验 开发 的 内 容 。 











8.3 前 端 工作 流 

从 宏观 角度 切换 到 微观 角度 ， 我 们 来 了 解 一 个 良好 的 原型 设计 流程 的 重要 性 ， 以 保证 你 团 
队 中 的 前 端 工 程 师 都 已 经 做 好 迈 向 成 功 的 准备 。 这 里 的 很 多 内 容 都 是 跨 界 的 ， 但 是 它们 对 
前 端 工 程 师 的 开发 效率 和 工作 满意 度 有 着 重要 的 影响 。 


现在 ,我 们 不 能 假设 所 有 的 工程 师 都 有 相关 的 经 验 ， 因 此 前 端 工作 流 应 该 在 新 人 入 职 时 就 
开始 运作 。 这 样 一 来 ， 理 解 一 个 新 人 工作 时 需要 的 所 有 步 又 很 重要 ， 包 括 第 一 次 坐 下 来 
对 代码 ， 用 新 笔记 本 电脑 写 下 他 们 人 生 中 第 一 行 有 效 的 代码 。 









































8.3.1 必要 的 工具 

所 有 新 来 的 工程 师 的 首要 任务 都 是 安装 必要 的 软件 和 搭建 代码 运行 的 环境 。 这 通常 包括 安 
装 和 配置 你 最 喜欢 的 代码 编辑 器 、 安 装 一 些 Adobe 公司 的 软件 ， 以 及 下 载 你 常用 的 浏览 
器 。 在 这 些 软件 跑 起 来 之 后 ， 往 往 需 要 几 个 步骤 去 安装 Git 和 配置 服务 器 准 入 。 最 后 ， 新 
人 还 需要 整理 各 种 各 样 的 网 络 服务 和 密码 。 








没 错 ， 这 看 起 来 有 点 普通 ， 但 是 这 个 流程 越 流畅 ， 工 程 师 们 就 能 越 快 地 进入 到 实际 的 编码 
工作 中 。 





8.3.2 ”本 地 部 署 

跟 版 本 控制 器 打交道 ， 往 往 是 工程 师 上 班 时 要 做 的 第 一 件 事 ， 也 是 他 下 班 前 做 的 最 后 一 件 
事 。 这 是 一 个 授权 他 们 访问 网 站 代码 和 让 他 们 发 布 新 代码 的 工具 。 这 个 时 候 ， 他 们 可 能 需 
要 克隆 你 的 代码 到 本 地 环境 并 且 使 其 在 他 们 的 机 器 上 运作 起 来 。 这 个 步骤 可 以 很 简单 























git clone <repo> && cd <repo-name> && make website 


或 者 ， 这 可 能 是 个 很 长 的 流程 ， 包 括 拉 取 多 个 代码 库 ， 安 装 一 个 本 地 数据 库 ， 配 置 各 种 各 
样 的 服务 器 设置 ， 其 至 修改 计算 机 网 络 和 设置 VPN。 不 管 你 的 流程 是 什么 ， 一 定 要 确保 在 
README.md 文件 中 说 清楚 ， 以 及 给 出 可 以 联系 的 人 或 者 资源 ， 以 防 用 户 对 流程 中 的 某 些 
步骤 存在 疑问 。 
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千 万 不 要 低估 这 个 流程 所 需 花 费 的 时 间 ! 我 曾经 参与 过 一 些 只 需要 几 分 钟 就 能 配置 起 来 的 项 
目 ， 我 也 听 过 一 些 粳 糕 的 故事 : 一 位 新 的 工程 师 花 了 几 个 星期 才 使 网 站 在 本 地 环境 跑 起 来 。 











所 以 ， 现在 我 们 的 工程 师 拥有 了 一 个 代码 编辑 器 、 一 个 浏览 器 和 一 个 本 地 可 编辑 的 网 站 。 那 


么 ， 在 他 们 开始 工作 之 前 ， 还 需要 什么 呢 ? 


8.3.3 编写 用 户 故 事 





不 妨 给 他 们 一 些 事情 做 ? 我们 将 在 下 一 节 介绍 。 





不 管 你 叫 它 们 任务 、 标 签 、 故 事 还 是 作业 ， 我 们 都 需要 通过 沟通 把 人 的 想法 和 愿望 提炼 成 











一 个 精准 的 、 可 操作 的 和 可 检验 的 要 求 。 


因为 没有 人 会 读 心术 ， 所 以 我 们 需要 编写 用 户 故 








事 ， 详 细 地 描述 问题 的 缘由 、 建 议 的 解决 方案 和 必须 满足 的 需求 点 。 


把 所 有 的 事情 分 解 成 小 而 简单 的 需求 ， 这 种 方式 在 前 端 开 发 中 也 是 适用 的 。 现 在 ， 既 然 从 
简单 的 开发 页 面 进 入 到 了 构建 设计 系统 的 级 别 ， 我 们 就 需要 确保 分 解 工作 任务 的 方式 能 够 
体现 新 的 方法 论 思想 。 这 意味 着 我 们 不 需要 再 写 类 似 “ 更 新 “关于 我 们 ”页 面 ” 这 样 的 用 
户 故 事 。 这 一 类 需求 通常 包含 一 系列 的 排版 和 布局 上 的 变更 ， 还 有 可 能 包含 类 似 “ 把 用 户 





























行动 召唤 (call to action，CTA) 按钮 内 边 
这 样 的 用 户 故 事 非 常 糟糕 。 














距 扩大 一 倍 ” 这 样 的 要 求 。 以 下 解释 了 为 什么 说 








。 我 们 是 否 被 问 及 ， 是 改变 所 有 CTA 按钮 的 内 边 距 ， 还 是 只 改变 “关于 我 们 ”页 面 的 那 


一 个 ? 
。 丸 
面 需 要 采用 这 个 大 号 的 按钮? 

















荆 

















果 我 们 不 是 要 更 新 所 有 的 CTA 按钮 ， 那 么 除了 “关于 我 们 ”之 外 ,是 否 还 有 其 他 页 











。 提出 这 个 任务 的 人 ， 是 否 有 权 做 全 站 范围 的 改动 ? 或 者 ， 假 如 我 们 改变 了 全 部 的 CTA 





按钮 ， 但 是 正在 为 主页 编写 需求 的 人 却 














不 希望 使 用 这 个 新 按钮 呢 ? 


。 如 果 一 个 人 正在 更 新 “关于 我 们 ” 页面 上 的 CTA 按钮 ,但 另外 一 个 人 又 被 指派 去 改变 “ 联 
系 我 们 ”页 面 上 的 CTA 按钮 ， 会 发 生 什么 呢 ? 
。 为 什么 对 全 局 CTA 按钮 的 一 个 简单 调整 ， 会 跟 一 堆 的 局 部 和 全 局 的 变动 迷 合 在 一 起 ? 


比 起 那些 对 单 页 面 进 行 多 处 修改 的 任务 ， 我 们 更 应 该 把 前 端 开 发 任务 的 重心 放 在 对 系统 所 
做 的 改变 上 。 与 其 编写 一 个 涉及 一 堆 修改 的 大 任务 ， 不 如 来 一 个 这 样 的 任务 :“ 创 建 一 个 
新 的 拥有 16px 内 边 距 的 CTA 按钮 ， 用 于 代替 所 有 内 部 网 页 中 那些 8px 内 边 距 的 按钮 。 


很 明显 ， 这 样 的 任务 不 是 让 我 们 去 改变 原 有 的 CTA 按钮 ， 而 是 创建 一 个 新 的 组 件 。 我 们 




















都 知道 ， 这 样 的 改变 是 可 选 的 ， 只 有 我 们 














回 到 “关于 我 们 ”页 面 (另外 一 个 任务 )， 更 新 








HTML 去 使 用 新 的 组 件 时 ， 网 站 的 内 容 才 会 发 生变 化 。 


通过 关注 组 件 而 非 单 页 面 的 内 容 ， 我 们 可 以 保证 优先 考虑 的 是 设计 系统 ， 以 及 改动 对 系统 
产生 的 影响 。 这 样 的 方式 创建 了 一 个 更 具 弹 性 的 系统 ， 有 助 于 避免 多 个 页 面 之 间 的 冲突 。 
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8.4 开发 


现在 我 们 的 任务 是 更 新 系统 而 不 仅仅 是 更 新 页 面 ， 我 们 可 以 设计 一 个 对 系统 影响 最 小 的 改 
动 来 实现 这 个 需求 。 我 们 已 经 有 一 个 拥有 8px 内 边 距 的 典型 的 按钮 ， 现 在 我 们 需要 新 建 一 
个 拥有 16px 内 边 距 的 组 件 。 先 来 看 看 要 改动 的 代码 : 




















.ctaf{ 
background: blue; 
color: white; 
padding: 8px; 

} 


在 工程 师 编 写 新 的 样式 之 前 ， 我 们 应 该 让 他 们 遵循 一 个 普遍 而 公认 的 方法 ， 那 就 是 创建 功 
能 分 支 。 功 能 分 支 是 一 个 从 开发 主干 分 离 出 来 的 Git 分 支 ， 你 可 以 在 上 面 开 发 和 提交 代码 ， 
并 最 终 把 功能 特性 合并 到 主干 中 。 这 个 方法 的 好 处 是 ， 你 不 用 向 主干 提交 不 完整 的 代码 。 
另外 ， 在 合并 回 主干 之 前 ， 其 他 人 可 以 检查 并 测试 你 在 功能 分 支 上 提交 的 代码 。 



































在 新 的 功能 分 支 创 建 以 后 ， 是 时 候 让 工程 师 编 写 CSS 了 。 现 在 只 有 一 个 问题 : 工程师 写 这 
个 CSS 可 以 有 很 多 种 方法 。 


他 们 可 以 用 一 个 全 新 的 按钮 来 代替 之 前 的 那个 : 








.Cta-Large { 
background: blue; 
color: white; 
padding: 16px; 











如 有 果 正 在 使 用 Sass， 那 么 他 们 可 能 用 混入 来 处 理 这 个 任务 ， 然 后 重 构 这 两 个 按钮 : 





@nixin button($size) { 
background: blue; 
color: white; 
padding: $size; 


} 


.cta { 
QincLude button(8px); 
} 


.cta-large { 
@include button(8px); 
} 


也 可 以 选择 添加 一 个 用 于 重 置 样式 的 类 ， 这 样 我 们 的 按钮 就 会 具有 .cta 和 .cta-large 两 
个 类 : 
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.cta-large { 
padding: 16px; 
4 


/* _ HTML 示例:<a class="cta cta-Large"> */ 


或 者 可 以 使 用 数据 属性 来 代替 类 ， 写 法 如 下 : 





.cta[data-size="large"] { 
padding: 16px; 
} 


/* HTML 示 例 : <a class="cta" data-size="large"> */ 


很 明显 ， 就 像 修改 一 下 按钮 这 么 简单 的 事情 ， 也 有 无 数 种 不 同 的 方法 。 虽然 上 面 这 四 种 方 
法 的 效果 是 一 样 的 ， 但 对 于 创建 和 维护 的 系统 而 言 ， 影 响 却 大 相 径 庭 。 





这 就 是 为 什么 我 们 要 在 第 二 部 分 花 那么 多 的 时 间 说 明 我 们 书写 选择 器 、CSS 和 标签 元 素 的 
方式 。 有 了 描述 代码 规范 的 文档 ， 工 程 师 更 容易 编写 出 正确 的 代码 ， 并 提交 到 它们 的 功能 
分 文 上 。 

这 时 ， 可 以 检查 新 开发 的 功能 分 支 了 ， 并 且 工 程 师 可 以 创建 一 个 合并 请 求 〈 或 者 拉 取 请 
求 )， 这 等 于 说 :“ 我 这 里 有 一 些 我 认为 完整 的 代码 ， 请 你 检查 一 下 ， 然 后 合并 到 主干 好 
吗 ? ”这 会 比 直接 合并 代码 到 主干 费时 一 些 ， 但 是 好 处 是 在 这 些 代 码 被 采纳 之 前 ， 拉 取 请 
求 提 供 了 一 个 代码 审查 和 意见 反馈 的 机 会 。 




















有 时 候 ， 审 查 的 过 程 中 会 发 现代 码 中 的 一 些 重 大 缺陷 ， 或 者 觉得 这 些 代 码 不 符合 系统 的 设 
计 原 则 。 有 时 候 这 个 审查 只 是 提供 一 个 机 会 给 出 更 好 的 建议 ， 比 如 更 佳 的 CSS 编写 方式 、 
更 优 的 Sass 函数 、 更 清晰 的 文档 说 明 。 就 算 最 后 的 合并 请 求 只 是 得 到 了 一 个 大 赞 ， 多 一 个 
人 检查 系统 的 改动 ， 也 有 助 于 保证 提交 的 代码 是 最 佳 的 。 


























现在 ,工程 师 创 建 的 代码 已 经 被 合并 到 主干 ， 是 时 候 把 这 些 代码 部 署 到 生产 环境 中 了 。 


8.5 发 布 

我 们 的 工程 师 做 到 了 ! 他 们 在 代码 库 中 做 了 一 些 改动 来 解决 CTA 按钮 的 问题 ， 经 过 代码 
审查 和 测试 ， 我 们 已 经 准备 好 把 这 些 改动 发 布 给 用 户 。 这 一 次 ， 假 设 我 们 采用 的 是 Sass 的 
混入 方式 去 创建 一 个 .cta 按钮 和 一 个 .cta-tLarge 按钮 。 那 么 ，Sass 文件 的 改动 被 提交 到 
了 主干 ,但 是 这 并 不 能 保证 用 户 在 访问 网 站 时 能 够 使 用 到 这 些 新 的 CSS。 因 此 在 你 打开 
FTP 客户 端 之 前 ， 让 我 们 看 一 下 不 同 发 布 方式 的 利 浆 。 


日 Pm * * AN 
8.6 提交 编译 后 的 资源 
在 版 本 控制 器 中 ， 最 好 的 方法 是 只 提交 少量 必要 的 代码 。 这 意思 是 说 ， 在 Git 中 忽略 那些 
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临时 文件 ， 或 者 那些 需要 下 载 用 来 编译 代码 的 资源 文件 (我 们 会 在 下 一 章 中 详细 介绍 )。 
这 样 做 的 理由 是 网 站 并 不 需要 那些 临时 文件 和 Node 模块 。 这 些 文件 不 但 明显 地 增加 了 项 
目 文 件 的 体积 ， 而 且 还 会 不 断 引 起 代码 冲突 ， 因 为 你 本 地 的 临时 文件 可 能 跟 版 本 中 那些 对 
应 的 最 新 文件 不 一 致 。 


不 斑 的 是 ， 有 一 种 文件 类 型 正好 介 于 “网 站 功能 所 需 ” 和 “ 腔 肿 且 引 起 代码 冲突 ”之 间 : 
编译 后 的 资源 文件 。 当 编译 Sass、CoffeeScript、LESS 上 时， 通过 后 置 处 理 器 添加 浏览 器 厂 
商 前 级 时 ， 合 并 JavaScript 文件 时 ， 创 建 图 标 字 体 或 者 压缩 图 片 时 ， 我 们 都 在 创建 编译 后 
的 文件 。 我 们 应 当 怎 么 处 理 这 些 文件 呢 ? 如 果 我 们 提交 它们 会 怎么 样 呢 ? 能 否 实现 即使 不 
提交 它们 ， 网 站 仍然 能 正常 运行 呢 ? 




























































































很 多 场景 下 ， 你 会 发 现 不 得 不 提交 这 些 资源 文件 。 这 不 是 理想 的 方法 ， 除 非 你 想 抛弃 预 处 
理 器 并 且 手 写 CSS 代码 ， 否 则 你 还 是 得 把 它们 添加 到 源码 中 。 这 个 方法 的 好 处 是 ， 你 的 源 
码 中 永远 保存 着 浑 染 网 站 所 需 的 所 有 文件 。 如 有 果 你 的 服务 器 是 直接 读 取 GitHub 中 主干 的 
代码 ， 那 么 你 将 拥有 网 站 所 需要 的 一 切 。 另 外 一 个 好 处 是 ， 如 果 那 些 不 懂 技 术 的 用 户 复制 
一 份 你 的 网 站 代码 ， 他 们 可 以 直接 访问 网 站 ， 而 不 需要 经 过 漫长 的 搭建 编译 工具 的 过 程 。 





























当然 ， 享 受 这 个 小 小 的 好 处 的 同时 ， 我 们 也 要 面 对 一 系列 的 问题 ， 其 中 最 大 的 问题 就 是 合 
并 代码 时 的 冲突 。 如 果 你 曾经 在 一 个 拥有 编译 后 资源 的 项 目 中 执行 过 Git rebase 指令 ， 就 
会 明白 我 想 表达 什么 。 就 算 不 是 rebase 指令 ， 只 要 你 合并 两 个 具有 编译 之 后 代码 的 分 支 ， 
也 很 有 可 能 需要 处 理 那 些 编译 后 的 资源 所 带 来 的 冲突 。 现 在 ， 解 决 这 些 冲 突 的 方法 很 简单 
(重新 编译 一 切 并 且 提 交 )， 但 是 这 也 意味 着 ， 你 永远 不 会 有 合并 请 求 ， 可 以 让 其 他 前 端 工 
程 师 一 起 来 解决 最 终 CSS 中 的 代码 冲突 。 


如 有 果 你 希望 避免 这 些 问 题 ， 并 且 在 你 的 代码 库 中 不 保存 编译 后 的 资源 文件 ， 现 在 你 有 了 一 
些 选 择 。 接 下 来 让 我 们 看 一 看 。 


8.7 ”持续 集成 的 服务 器 


使 用 类 似 Jenkins 或 Travis CI 的 服务 带 来 的 好 处 远 远 超出 了 本 书 的 范围 ， 不 过 它们 的 众多 
用 法 之 一 是 在 代码 发 布 到 服务 器 之 前 ， 先 对 代码 进行 一 些 处 理 。 这 意味 着 我 们 可 以 在 Git 
上 忽略 那些 编译 后 的 资源 ， 因 为 CI 服务 器 会 在 检测 代码 后 执行 我 们 的 编译 任务 ， 然 后 再 
把 代码 发 布 到 服务 器 。 


这 种 方法 不 仅 可 以 保持 代码 库 的 整洁 ， 也 有 助 于 减少 意料 之 外 的 代码 回归 。 如 果 我 们 把 编 
译 后 的 资源 文件 提交 到 代码 库 ， 那 么 当 我 的 功能 分 支 合 并 到 主干 时 ， 主 干 上 的 那些 资源 文 
件 肯定 就 是 我 的 机 器 上 编译 的 结果 。 一 旦 有 其 他 工程 师 的 功能 分 支 合并 到 主干 ， 那 么 我 的 
功能 特性 就 会 被 那个 工程 师 电 脑 上 编译 的 结果 所 覆盖 。 
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当然 ， 其 他 工程 师 也 是 基于 我 最 新 的 Sass 代码 和 JavaScript 文件 来 编译 的 ， 但 是 往往 由 于 
操作 系统 、 系 统 设置 或 者 安装 软件 的 不 同 ， 最 终 编译 出 来 的 代码 也 会 有 所 不 同 。 另 一 方 
看 ， 如 果 我 们 使 用 CI 编译 的 代码 来 测试 功能 分 支 ， 同 时 也 使 用 CI 编译 的 代码 部 署 到 线 
上 ， 那 么 任何 时 候 我 们 都 能 保证 这 些 编译 后 的 代码 是 完全 一 样 的 。 






































8.7.1 标签 分 支 

Git 的 强大 功能 之 一 就 是 创建 标签 分 支 。 标 签 是 项 目 历史 中 的 一 个 快照 ， 基 于 某 一 次 提交 
后 的 代码 。 不 管 是 发 布 到 线 上 服务 器 ， 还 是 发 布 渠道 (我 们 后 面 会 介绍 )， 标 签 是 发 布 代 
码 的 一 种 便捷 方式 。 标 签 的 一 个 好 处 是 ， 它 可 以 基于 任何 分 支 ， 而 不 仅仅 是 线 上 分 支 。 

















8.7.2 ”究竟 为 什么 要 这 么 做 

发 布 软件 的 一 个 方法 是 为 软件 的 每 个 版 本 创建 一 个 发 布 分 支 。 如 果 1.1 版 本 准备 发 布 ， 你 
就 从 主干 创建 一 个 名 叫 vl.1-dev 的 分 支 ， 然 后 在 这 个 分 支 上 继续 开发 ， 直 至 版 本 发 布 就 
绪 。 通 常 来 说 ， 如 果 v1.1-dev 这 个 分 文 上 有 一 些 bug， 你 会 在 分 支 上 解决 ， 然 后 选择 是 否 
要 把 这 些 修复 问题 的 代码 合并 到 主干 。 有 了 时候 为 了 发 布 1.1 版 本 ， 我 们 需要 那些 修复 问题 
的 代码 ， 但 这 些 代 码 跟 最 终 合并 到 主干 的 不 一 定 一 样 。 你 可 能 只 是 临时 修复 一 下 ， 把 问题 
记 下 来 ， 以 后 有 时 间 再 用 正确 的 方法 解决 。 


有 效 利用 标签 分 支 的 另 一 个 方法 是 只 在 那些 标签 分 支 上 提交 你 编译 后 的 资源 。 记 住 ， 标 签 
永远 指 的 是 某 一 次 提交 ， 即 使 创建 那 次 提交 的 分 支 被 删除 之 后 ， 标 签 仍然 存在 。 而 且 ， 这 
一 次 提交 也 没有 说 一 定 要 合并 到 主干 上 。 在 第 10 章 中 ， 我 会 介绍 我 们 在 Red Hat 项 目 中 使 
用 的 流程 。 现 在 ， 在 结束 这 一 章 之 前 ， 让 我 们 看 一 下 如 何 利用 发 布 渠道 把 我 们 的 代码 发 布 
到 多 个 服务 器 而 非 单一 服务 器 。 


8.8 ”发 布 渠道 

如 果 你 所 有 的 代码 都 在 一 个 代码 库 中 ， 那 么 你 可 能 不 用 太 多 地 关注 发 布 渠 道 。 但 如 果 你 是 
在 为 几 十 个 甚至 几 百 个 网 站 编写 主题 、 类 库 或 者 模块 ， 除 了 简单 的 版 本 控制 器 之 外 ， 你 可 
能 已 经 尝试 过 不 同 的 发 布 渠 道 。 这 些 渠 道 比 你 想象 的 要 多 ， 而 且 你 经 常 有 不 止 一 种 选择 。 
以 下 是 一 个 简短 的 、 可 能 不 完整 的 列表 ， 至 少 能 让 你 有 个 了 解 : 



























































。 NPM (Node Package Manager) 

。 Bower 

。 Ruby Gems 

。 Composer 

。 Yeoman Generators 

。 Drupal Contrib Modules 和 Drush 
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。 WordPress 插件 


。 Homebrew 








。 Sublime Text Package Control 
。 RPM 
。 PEAR 





不 管 写 的 是 哪 种 类 型 的 代码 (PHP、Node、Ruby、CMD 模块 、Mac 软件 、Unix 软件 、 
VIM 插件 、IDE 插件 )， 你 都 会 发 现 已 经 有 人 为 它 编 写 了 用 于 发 布 代码 的 包 管理 器 。 考 虑 
到 Bower 其 实 是 个 Node 模块 ， 所 以 说 其 至 还 有 包 管 理 器 来 管理 你 的 包 管理 器 。 使 用 包 管 
理 器 来 发 布 你 的 代码 有 很 多 好 处 ， 这 些 好 处 比 我 们 需要 的 还 多 ， 因 此 包 管理 器 当然 比 其 他 
的 工具 更 好 。 


软件 包 管理 器 的 好 处 如 下 。 















































发 布 不 同 的 版 本 
这 代表 使 用 你 代码 的 用 户 不 会 自动 升级 到 最 新 版 ， 他 们 可 以 通过 评估 新 代码 来 决定 是 否 
需要 升级 。 


用 户 很 容易 知道 什么 时 候 有 新 版 本 可 用 
大 多 数 的 包 管理 器 都 拥有 内 置 的 通知 机 制 和 内 部 的 升级 系统 ， 因 此 我 们 很 容易 获取 新 的 
模块 和 代码 。 


只 发 布 那些 用 户 所 需 的 文件 


你 往往 有 一 个 很 大 的 系统 来 编译 你 的 代码 ， 而 使 用 包 管 理 器 可 以 让 你 只 发 布 那些 用 户 需 
要 的 文件 。 





从 私有 代码 库 中 发 布 代码 
有 了 时候 Git 代码 库 的 权限 不 能 开放 给 所 有 人 。 即 使 最 终 产品 面 对 的 是 普通 用 户 ， 私 有 版 
本 的 控制 器 和 防火 墙 也 会 将 源码 加 以 严密 保护 。 包 管理 器 允许 你 把 那些 发 布 的 代码 放置 
到 公共 的 空间 。 


花 些 时 间 看 看 你 的 项 目的 一 些 选择 。 你 不 会 永远 只 停留 在 一 个 单一 的 系统 上 〈 很 多 项 目 都 
是 部 署 在 Bower 和 NPM 上 )， 然 而 不 管 你 决定 做 什么 系统 ， 都 会 因为 用 户 使 用 你 的 代码 来 
构建 编译 系统 而 感到 自豪 。 因 此 ， 接 下 来 我 们 讨论 一 下 用 来 创建 这 些 共享 代 码 的 系统 ， 以 
及 以 其 他 人 编写 的 代码 为 基础 的 系统 。 
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第 9 章 


任务 处 理 器 

















对 很 多 前 端 工 程 师 来 说 ，Sass 是 接触 到 的 第 一 个 编译 系统 ， 或 者 说 是 任务 处 理 器 。 在 这 
之 前 ， 我 们 的 工作 方式 通常 是 修改 CSS 文件 然后 刷新 浏览 器 。Sass 打开 了 自动 化 处 理 的 
大 门 。 有 些 人 可 能 会 认为 我 们 只 是 在 工作 流 中 多 增加 了 一 条 指令 , 但 对 于 那些 第 一 次 发 现 
Sass 的 人 来 说 ， 这 个 小 小 的 任务 是 非常 值得 一 试 的 。 


























Compass 让 我 们 不 仅 发 现 CSS3 的 混入 可 以 节省 很 多 查询 CSS3 样式 生成 器 (http:// 
css3generator.com/) 的 时 间 ， 还 认识 到 了 项 目 中 配置 文件 的 作用 。 有 了 Compass， 我 们 可 
以 创建 一 个 config.rb 文件 ， 用 来 描述 重要 文件 夹 的 路 径 、 指 定 开发 环境 与 线 上 环境 的 设 
置 ， 并 绑 定 重 要 的 调试 工具 。 这 个 配置 文件 可 以 保留 并 分 享 给 团队 的 其 他 人 ， 让 新 人 更 容 
易 上 手 。 












































随 着 Sass 社区 的 发 展 ， 越 来 越 多 的 Compass 插件 涌现 出 来 ， 从 先进 的 颜色 函数 到 栅 格 系 
统 、 布 局 比例 工具 、 煤 体 查询 管理 ， 等 等 。 这 些 工具 都 作为 gem 组 件 发 布 ， 可 以 直接 导入 
任何 一 个 使 用 Compass 的 项 目 中 。 





























Compass 还 可 以 让 模块 开发 者 使 用 Ruby 的 功能 ， 比 如 访问 本 地 文件 、 执 行 Ruby 函数 、 编 
译 Ruby 模板 和 把 数据 传递 回 Sass 文件 。 这 人 允许 用 户 在 模块 中 进行 复杂 的 数学 运算 ， 而 这 
是 单独 使 用 Sass 所 无 法 实现 的 。Compass 还 具备 这 样 的 功能 : 用 不 同文 件 夹 中 的 PNG 图 
片 生成 雪 括 图 ， 或 获取 图 片 文件 的 宽度 和 高 度 。 


如 今 只 用 一 条 compass compile 指令 ， 开 发 人 员 就 可 以 把 所 有 的 Sass 文件 编译 到 目标 CSS 
所 在 的 目录 ， 并 且 图 片 和 字体 都 分 别 指向 各 自 的 路 径 。Sass 文件 可 以 使 用 流行 的 框架 来 编 
译 ， 如 Susy grids、Modular Scale、Breakpoint 和 Color Schemer。Compass 在 创建 若干 个 自 
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定义 的 雪 正 图 ， 批 量 获取 图 片 的 尺寸 ， 并 在 CSS 中 设置 它们 的 高 度 和 宽度 时 ， 就 会 完成 上 
述 的 工作 。 














Compass 不 仅 是 我 们 对 编译 系统 的 第 一 次 接触 ， 也 是 很 多 人 不 愿 使 用 最 近 很 火 的 新 型 
Node.js 任务 处 理 器 的 首要 原因 。 简 单 了 解 Grunt 和 Gulp 这 类 工具 之 后 ， 很 多 人 (包括 我 ) 
的 第 一 反应 都 是 :“ 噢 ， 这 跟 Compass 差不多 ， 只 是 更 复杂 些 而 已 。” 对 于 一 个 完全 使 用 
Compass 来 构建 编译 流程 的 开发 人 员 来 说 ， 配 置 Grunt 来 编译 Sass 像 是 一 个 完全 不 必要 的 
步骤 。 然 而， 一 旦 配置 好 Gulp 或 Grunt 来 编译 Sass， 我 们 就 开始 关注 其 他 可 做 的 事情 ， 并 
且 很 快意 识 到 我 们 的 编译 流程 与 之 前 相 比 还 是 有 所 不 同 的 。 


pm | A 3 
9.1 在 任务 处 理 器 中 完成 一 切 
使 用 基于 Nodejs 的 任务 处 理 器 ， 在 我 的 工作 流 中 有 一 点 多 米 诺 骨牌 效应 。 作 为 一 名 Grunt 
用 户 ,我 拥有 13 000 多 个 可 用 模块 ， 而 且 这 些 模块 为 我 的 工作 流 提供 了 各 种 各 样 的 功能 ， 
而 不 单单 是 Sass 和 CSS。 下 面 是 我 使 用 任务 处 理 器 实现 的 一 些 功 能 : 




















下 





























。 安装 需要 的 Ruby 库 和 Bower 安装 包 
。 清理 临时 文件 夹 

。 创建 软 连 接 

。 编译 Sass 

。 合并 JavaScript 

。 加 载 第 三 方 JavaScript 库 

。 把 SVG 文件 编译 成 图 标 字体 
。 对 图 片 进行 处 理 ， 减 少 文件 体积 ， 裁 剪 成 各 种 尺寸 

。 同步 文件 到 远程 服务 器 

。 创建 Git 标签 

。 运行 可 视 化 的 回归 测试 

。 生成 代码 的 样式 文档 

。 自动 生成 训 览 器 厂商 的 前 绥 

。 编译 组 件 库 

。 优化 我 的 Sass、CSS、JavaScript、JSON， 等 等 

。 基于 JSON 模式 来 验证 数据 

。 启动 Node 和 PHP 服务 器 

。 监听 文件 改动 来 刷新 浏览 器 

任务 处 理 器 使 前 端 架 构 师 能 够 创建 网 站 的 蓝图 。 四 个 核心 都 被 打包 成 自动 化 流程 ， 通 过 自 
动 化 技术 ， 我 们 不 仅 规范 了 流程 ， 同 时 还 对 它 进 行 了 优化 。 代 码 检查 工具 能 够 帮助 我 们 规 
范 和 提高 代码 标准 。 测 试 组 件 在 本 地 或 者 持续 集成 工具 (比如 Jenkins 或 TravisCI) 中 运 
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行 。 只 需 点 一 下 鼠标 ， 就 可 以 持续 编译 出 新 的 代码 并 发 布 到 线 上 。 此 外 ， 文 档 还 可 以 自动 
读 取代 码 中 的 注释 、 模 板 文件 和 描述 大 纲 。 











更 深 的 探索 

刚 接 触 前 端 架 构 时 ， 我 还 没 听 说 过 Grunt， 那 时 对 创建 Compass 模块 非常 感 兴趣 。 我 从 编 
写 可 以 支持 新 项 目的 小 型 gem 包 开 始 ， 思 考 怎 样 利 用 gem 包 把 一 个 基础 样式 同时 发 布 到 
多 个 网 站 上 。 虽 然 这 两 个 例子 都 是 有 效 的 ， 但 它们 反映 出 ， 如 果 我 对 Ruby 了 解 不 多 ， 那 
么 能 做 的 事情 将 会 非常 有 限 。 再 者 ， 学 习 了 一 些 基本 的 Ruby 教程 之 后 ， 我 意识 到 除了 
Ruby on Rails 应 用 相关 的 知识 ， 市 面 上 并 没有 太 多 学 习 Ruby 编程 的 资源 ， 更 不 用 说 使 用 
Ruby 编写 Compass 模块 的 了 。 















































对 于 Grunt 而 言 ， 我 的 优势 之 一 是 已 经 掌握 了 编写 模块 所 使 用 的 语言 : JavaScript。 在 使 用 
一 些 模块 几 个 月 之 后 ， 我 发 现 它们 已 经 能 够 满足 我 95% 的 需求 。 虽 然 我 现在 还 不 是 Node. 
js 开发 者 ， 但 在 某 些 场 景 下 还 是 可 以 给 一 个 模块 添加 特性 或 者 修复 bug， 然 后 把 它 发 布 出 
去 。 有 一 次 ， 我 想 在 流程 中 使 用 Grunt-PhantomCSS 模块 ， 但 是 发 现 必须 重 写 项 目的 大 部 
分 代码 来 适 配 它 。 因 此 ， 我 复制 了 这 个 项 目 ， 做 了 一 些 必 要 的 改动 并 提交 到 GitHub 上 ， 
这 样 其 他 人 就 可 以 在 他 们 的 项 目 中 使 用 它 了 。 我 成 为 了 一 名 模块 编写 者 ， 而 不 仅仅 是 模块 
使 用 者 。 


9.2 在 项 目 中 使 用 任务 处 理 器 


我 第 一 次 接触 Grunt 是 在 一 个 大 型 的 现成 的 代码 库 中 ， 它 有 众多 的 模块 和 抽象 的 代码 组 织 
方式 ， 因 此 对 新 手 来 说 不 容易 理解 。 然 而 ， 经 过 一 段 时 间 的 学 习 ， 最 终 我 能 够 修改 部 分 代 
码 ， 甚 至 添加 一 些 新 的 功能 进去 。 不 过 ， 我 是 一 个 需要 从 头 到 尾 理解 代码 之 后 才能 接受 和 
投入 其 中 的 人 。 


然后 ， 我 开始 分 解 项 目 ， 移 除 一 切 能 够 移 除 的 东西 ， 直 至 剩 下 可 运行 的 最 小 基本 框架 和 基 
础 配置 。 这 时 ， 我 能 理解 项 目 中 的 每 一 行 代码 ， 并 且 可 以 用 我 自己 的 方式 在 项 目 中 实现 更 
复杂 的 功能 。 下 面 是 一 段 用 于 编译 Sass 的 最 简单 的 Grunt 代码 : 























module.exports = function(grunt) { 
grunt.loadNpmTasks('grunt-sass'); 
grunt.initConfig({ 
sass: { 
options: { 
由 
dist: { 
src: 'sass/style.scss', 
dest: 'css/style.css', 
} 
} 
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]); 
grunt.registerTask('default', [ 
"Sass '， 
]); 
}; 


面 这 段 代 码 的 作用 是 把 你 的 style.scss 程序 代码 编译 成 style.css， 可 以 分 为 如 下 三 个 部 分 。 





业 














加 载 任务 
Grunt 需要 知道 加 载 哪个 Node 任务 到 编译 流程 中 。 如 果 你 直接 加 载 package.json 中 的 所 
有 的 包 ， 那 么 Load-grunt-tasks 模块 (https://github.com/sindresorhus/load-grunt-tasks) 
将 会 减轻 你 的 很 多 负担 。 





设 定 配置 
每 一 个 加 载 的 任务 都 有 一 系列 可 以 配置 的 选项 。 在 这 个 例子 中 ， 我 们 只 是 配置 了 Sass 
任务 的 源 地 址 和 目标 地 址 ， 实 际 上 还 可 以 打开 或 关闭 sourcemaps、 设 置 额外 的 包含 路 
径 ， 或 者 改变 最 终 输出 的 CSS 格式。 每 个 任务 都 可 以 有 不 同 的 写法 或 者 目标 。 你 可 
以 设 定 一 个 打开 sourcemaps 和 输出 完整 代码 的 配置 用 于 开发 环境 ， 然 后 设 定 一 个 关闭 
sourcemaps 和 输出 压缩 代码 的 配置 用 于 线 上 环境 。 











注册 自 定义 任务 

在 这 个 环节 ， 我 们 可 以 把 各 个 独立 的 任务 整合 到 一 个 自 定义 的 父 级 任务 中 。default 任 
务 是 运行 grunt 指令 所 执行 的 默认 任务 。 你 可 以 在 default 任务 中 添加 更 多 的 任务 ， 比 
如 Sass Lint， 也 可 以 新 建 其 他 自 定义 的 父 级 任务 ， 比 如 test 或 deploy。 


下 














现在 用 GulpJS 实现 同样 的 功能 : 


var gulp = require('gulp'); 
var sass = require('gulp-sass'); 
gulp.task('default', function () { 
gulp.src('./*.scss') 
.pipe(sass()) 
.pipe(gulp.dest('./css')); 
}); 


Gulp 定义 任务 的 方式 跟 Grunt 有 所 不 同 。 从 脚本 中 你 就 能 发 现 它 们 在 代码 风格 上 大 相 径 
庭 。Grunt 基于 配置 使 用 对 象 的 符号 ， 在 一 个 地 方 定义 任务 ， 然 后 在 另 一 个 地 方 执行 任务 ，; 
而 Gulp 把 任务 和 配置 连 在 一 起 ， 使 用 管道 的 方式 ， 把 代码 从 一 个 操作 传递 到 下 一 个 操作 。 
接 下 来 分 析 一 下 这 段 代码 。 














加 载 模 块 
与 Grunt 使 用 LoadNpmTasks 不 同 ，Gulp 使 用 传统 的 基于 Node 的 require() 语法 。 因 此 
一 开始 我 们 就 把 guLp 和 gulp-sass 加 载 进来 ， 并 保存 到 变量 中 供 后 续 使 用 。 
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创建 自 定 义 任 务 
这 里 再 次 使 用 了 default 任务 ， 表 明 运 行 gulp 时 会 发 生 什 么 。 不 过 ， 我 们 并 不 是 使 用 
grunt.registerTask 来 列 出 所 有 想 要 执行 的 预定 义 任务 ， 而 是 在 函数 内 部 来 构建 完整 的 





























Gulp 的 优点 
Gulp 方式 倾向 于 使 用 小 而 并 行 的 国 数 ， 这 些 国 数 往往 先是 收集 资源 ， 然 后 通过 几 个 管 
道 处 理 ， 最 终 把 结果 输出 到 目标 环境 。 它 主要 有 两 个 优点 : 一 、 并 行 执行 的 方式 意味 着 
在 处 理 Sass 的 时 候 ， 不 会 阻塞 其 他 任务 的 运行 ， 二、 管道 的 方式 让 Gulp 可 以 连贯 地 对 
一 个 资源 进行 多 个 操作 ， 而 不 是 像 Grunt 那样 ， 需 要 把 输出 的 CSS 保存 到 一 个 临时 目 
录 ， 然 后 再 对 这 些 临 时 文件 进行 第 二 次 处 理 。 


9.3 有 了 明显 的 优胜 者 吗 


那么 ， 哪 种 方式 更 好 呢 ? 这 取决 于 你 的 需求 。Grunt 是 目前 的 主流 方式 ， 优 势 是 拥有 大 量 
的 现成 模块 。 另 一 方面 ，Gulp 在 大 型 项 目 中 的 执行 速度 更 快 一 些 ， 它 使 用 管道 的 方式 来 处 
理 代码 ， 可 以 让 你 的 项 目 变 得 更 加 精巧 。 



















































































尽管 我 想 尝 试 一 下 Gulp， 看 看 它 在 我 的 项 目 中 的 效果 ， 但 几 年 来 我 一 直 愉 快 地 用 着 Grunt。 
总 体 来 说 ， 两 者 都 是 非常 优秀 的 工具 ， 如 果 它 们 都 具备 你 需要 使 用 的 模块 ， 那 么 最 终 影响 
你 决定 的 可 能 就 是 代码 风格 了 。 




















最 后 ， 任 务 处 理 器 只 是 一 个 工具 。 前 端 架 构 师 的 职责 在 于 创建 高 效 且 抗 差错 的 工作 流 。 
此 ， 如 果 你 的 工具 能 帮助 开发 人 员 快 速 地 运作 起 来 ， 让 他 们 在 健壮 的 环境 中 编写 高 质量 的 
代码 ， 然 后 把 代码 部 署 到 测试 、 预 发 布 和 正式 发 布 环境 ， 那 么 不 管 你 选择 的 是 什么 框架 ， 
你 都 是 称职 的 前 端 架构 师 。 











四 








外 缉 
zh 
GS 7/ 
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第 10 章 


Red Hat 流 程 





在 Red Hat 公司 ， 前 端 团队 有 着 在 后 端 开 发 之 前 就 进行 多 次 迭代 的 绝 佳 优 势 。 我 们 先 对 
想 要 创建 或 更 新 的 功能 设 定 长 期 的 目标 ， 然 后 一 拿 到 经 过 确认 的 原型 ， 就 交 给 开发 团队 去 
实现 。 











在 过 去 的 项 目 中 ， 我 们 也 许 说 过 :“ 好 了 ， 这 就 是 我 们 希望 输出 的 标记 格式 ， 请 尽 可 能 保 
持 一 致 。 我们 会 使 用 一 组 Mustache 或 者 Twig 模板 来 创建 标记 ， 然 后 告诉 开发 团队 去 创 
建 能 够 输出 同样 标记 的 PHP、Ruby、Angular、React 或 Ember 模板 。 这 种 方式 的 问题 在 
于 ， 有 一 半 的 开发 时 间 都 浪费 在 让 后 端 输出 的 标记 跟 我 们 的 原型 保持 一 致 上 了 。 因 为 我 们 
总 是 在 解决 “CMS 中 输出 的 标记 与 我 们 的 原型 不 同 ” 的 问题 。 


即使 我 们 真 的 做 到 了 让 那些 标记 跟 原 型 保持 一 致 ， 往 往 也 会 担心 原型 和 CMS 代码 不 同步 
的 问题 。 有 可 能 其 中 一 边 发 生 了 变化 ， 另 一 边 却 没 有 ， 最 终 慢 慢 导 致 我 们 的 原型 不 被 信 
任 。 我 们 不 能 确定 原型 与 正在 开发 的 产品 是 否 一 致 ， 对 功能 的 迭代 又 是 直接 在 CMS 代码 
上 做 改动 。 这 个 问题 的 原因 在 于 ，CMS 和 原型 开发 工具 使 用 的 是 不 同 的 HTML 模板 ， 即 
使 它们 共享 了 CSS 和 JavaScript 文件 。 在 对 Red Hat 网 站 的 主题 进行 重 构 时 ， 我 们 有 机 会 
彻底 解决 这 个 “最 后 一 英里 ”(last mile) 的 问题 。 


/ 三 -bt 
10.1 征服 最 后 一 英里 
我 们 的 问题 是 ，Drupal 有 一 个 非常 固执 的 泻 染 引擎 ， 因 为 标记 必须 通过 Drupal 才能 演 染 ， 
所 以 如 果 不 运行 Drupal， 就 很 难 制作 标记 的 原型 。 因 此 ， 我 们 决定 颠覆 一 下 Drupal 的 泻 染 
途径 ， 并 加 入 自己 的 解决 方案 。 我 们 想 要 一 个 可 以 在 原型 工具 、Drupal、WordPress， 以 及 
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其 他 任何 希望 采用 我 们 的 设计 系统 的 平台 上 都 能 使 用 的 解决 方案 。 我 们 从 Twig 模板 语言 
入 手 ， 因 为 它 成 熟 且 稳定 ， 还 拥有 PHP 和 Node 编译 引擎 。 


既然 我 们 已 经 有 了 一 个 通用 的 泻 梁 引擎 ， 它 允许 在 原型 工具 中 使 用 跟 实 际 开发 中 一 致 的 模 
板 文件 ， 那 么 就 再 也 不 用 担心 系统 之 间 转 换 模板 的 问题 了 。 一 旦 在 样式 文档 中 创建 了 一 个 
样 例 ， 我 们 就 可 以 把 用 于 那个 样 例 的 数据 集 记 录 下 来 ， 交 给 后 端 开 发 人 员 来 实现 。 在 某 种 
程度 上 ， 我 们 创建 了 一 个 设计 系统 的 API， 或 者 一 个 样式 服务 ， 它 为 用 户 提供 了 一 个 简单 、 
清晰 、 跨 平台 的 接口 ， 用 于 接收 数据 输入 和 输出 相同 的 HTML。 


一 系列 标准 的 产 出 

数据 和 模板 的 关系 很 快 成 为 我 们 的 设计 系统 中 非常 重要 的 部 分 。 开 发 人 员 开始 要 求 提供 模 
板 变量 的 列表 、 可 变 的 内 容 类 型 ， 以 及 它们 当中 哪些 是 必 选 项 。 这 些 要 求 很 重要 ， 我 们 也 
希望 给 开发 人 员 提供 尽 可 能 完整 的 信息 。 于 是 ， 就 有 了 和 所 有 的 组 件 和 布局 一 同 提供 的 一 
系列 标准 产 出 。 


一 系列 标准 的 组 件 产 出 如 下 。 



































JSON 模 式 
该 模式 定义 了 组 件 的 各 种 属性 〈 变 量 )、 内 容 类 型 ， 以 及 其 中 哪些 是 必 选 项 。 

















模板 文件 
Twig 文件 接收 由 JSON 模式 定义 的 一 组 数据 。 可 选 数据 被 放 在 if 语句 之 后 ， 而 数组 数 
据 则 会 被 遍历 。 





Sass partial 
所 有 的 组 件 样式 都 来 自 单一 的 Sass partial 文件 。 它 会 被 编译 到 主 样式 style.css 中 ,或 者 
作为 一 个 独立 的 CSS 文件 被 加 载 进 来 。 





可 视 化 的 回归 测试 
这 个 文件 描述 了 每 一 次 运行 回归 测试 时 ， 需 要 测试 的 所 有 的 浏览 器 宽度 和 组 件 状态 。 在 
加 入 任何 新 的 代码 前 ， 一 定 要 通过 这 些 测试 。 




















测试 数据 

这 个 文件 允许 构造 测试 专用 的 数据 来 达到 完整 的 测试 覆盖 率 ， 以 及 测试 一 些 边界 情况 。 
文档 

文档 文件 是 为 文档 工具 Hologram (https://github.com/trulia/hologram) 提供 数据 的 














注 1: 这 是 一 种 通用 的 命名 惯例 ， 通 常 这 个 文件 不 会 被 它 自己 编译 ， 但 在 某 些 依赖 关系 的 情况 下 ， 也 可 能 被 
自己 编译 。 一 一 译 者 注 
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markdown 文件 ， 它 提供 组 件 的 描述 并 列 明 甚 功能。 此外， 文档 页 还 提供 组 件 的 可 视 化 
表示 和 在 线 编辑 器 ， 以 供 测 试 不 同 的 内 容 和 创建 该 内 容 集合 的 分 享 链接 。 

















文档 数据 是 文档 页 用 来 创建 初始 视图 的 原始 数据 。 


上 述 所 有 这 些 文件 对 于 功能 开发 而 言 都 是 宝贵 的 产 出 ， 但 其 中 有 一 个 文件 是 整个 流程 的 英 
基石 ， 因 此 也 通常 首先 创建 ， 那 就 是 JSON 模式 。 在 这 些 产 出 中 ， 没 有 哪个 文件 比 JSON 
模式 更 好 地 描述 了 这 项 功能 的 需求 和 能 力 。 每 当 一 个 组 件 的 功能 发 生变 化 时 ， 都 是 先 由 模 
式 引 起 的 ， 然 后 才 扩展 到 组 件 的 其 他 文件 。 正 因为 模式 文件 如 此 重要 ， 所 以 这 个 开发 流程 
称 为 模式 驱动 的 设计 系统 。 


10.2 ”模式 驱动 的 设计 系统 


目前 为 止 ， 在 软件 开发 领域 ， 测 试 驱动 的 设计 是 一 种 很 常见 且 被 广泛 接受 的 开发 方式 。 在 
动手 编写 具体 的 代码 之 前 ， 我 们 先 写 好 一 套 测试 用 例 ， 用 来 描述 该 代码 应 该 完成 什么 样 的 
功能 。 刚 开始 开发 时 ， 难 免 会 有 测试 不 能 通过 ， 不 过 随 着 功能 的 不 断 完善 ， 最 终 我 们 会 使 
所 有 的 测试 都 能 通过 。 












































模式 驱动 的 设计 系统 的 理念 跟 测 试 驱动 的 设计 是 相似 的 ， 区 别 在 于 ， 后 者 使 用 NodeUnit 
或 PHPUnit 编写 测试 用 例 来 描述 应 用 的 正确 功能 ， 而 前 者 则 使 用 JSON 来 创建 模式 。 这 些 
JSON 文件 为 设计 系统 的 组 件 定义 了 正确 的 数据 结构 。 在 模式 驱动 的 设计 系统 中 ， 我 们 首先 
关注 的 是 设计 的 内 容 和 用 户 接 口 ， 而 不 是 那些 标记 和 CSS。 接 下 来 看 看 Red Hat 网 站 用 到 的 
一 个 简化 版 的 JSON 模式 ， 了 解 一 下 这 些 信 息 如 何 帮助 我 们 为 设计 系统 做 出 更 好 的 决定 。 

















下 面 这 个 JSON 模式 定义 了 包含 一 个 标题 和 两 到 三 个 logo 图 片 的 视图 。 




















{ 
"type": "object", 
"properties": { 
"headline": { 
"type": "string", 
"format": "text" 
}， 
"body": { 
"type": "object", 
"oneof": [ 
{ 
"title": "Two Up", 
"required": ["logos", "layout"], 
"properties": { 
"layout": { 
"type": "string", 
"enum": ["2up"], 
"options": { 
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"hidden": true 
} 
}, 
"logos": { 
"type": "array", 
"format": "tabs", 
"minItems": 2， 
"maxItems": 2， 
"items": { 
"Sref": "#/definitions/logo" 


} 
}， 


二 
"title": "Three Up", 


"properties": { 
"layout": { 
"type": "string", 
"enum": ["3up"], 
"options": { 
"hidden": true 
} 
]， 
"logos": { 
"format": "tabs", 
"type": "array", 
"minItems": 3， 
"maxItems": 3， 
"items": { 
"Sref" : "#/definitions/logo" 
} 
} 
}， 
"required": ["logos","layout"] 
} 
] 
} 
]， 
"required": ["body"]， 
"definitions": { 
"logo": { 
"title": "Logo", 
"type": "object", 
"oneOf": [ 
{ 
"title": "Upload File", 
"properties": { 
"file": { 
"title": "Logo File", 
"description": "Upload your logo", 
"type": "string", 
"format": "file" 





} 
}, 
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"required": ["file"] 


}， 
{ 


"title": "Paste URL", 
"properties": { 


“rls 
"title": "Logo URL", 
"description": "Paste a URL to your logo", 
"type": "string", 
"format": "url" 
} 
5， 
"required": ["url"] 
} 
] 
} 
} 
} 


对 于 一 个 简单 的 组 件 来 说 ，91 行 的 代码 可 能 过 于 元 长 了 。 尽 管 如 此 ， 我 们 还 是 先 来 仔细 
看 看 每 个 区 块 ， 然 后 再 探讨 一 下 它们 各 自如 何 帮 助 实现 数据 结构 、 编 辑 器 UI 和 输出 的 
HTML., 








第 2 行 : 


"type": "object", 

"required": ["body"], 

"properties" { 
"headline": { 





裤 








我 们 创建 的 每 一 个 模式 都 描述 了 需要 收集 哪些 数据 ， 这 些 数据 最 终 会 传递 给 模板 或 视图 。 
模式 中 的 每 个 属性 要 么 代表 单个 数据 ， 要 么 代表 子 模式 里 面 的 一 组 数据 。 因 此 在 声明 属性 
之 后 ， 这 个 模式 文件 会 定义 出 一 个 键 值 对 的 对 象 ， 我 们 规定 只 有 body 字段 是 必 选 的 。 























第 5 行 : 


"headline": { 
"type": "string", 
"format": "text" 


}, 


第 一 个 属性 headLine 是 可 选 的 ， 因 为 上 面 的 必 选 字段 数组 中 没有 包括 这 一 项 。 我 们 知道 它 
是 一 个 字符 串 ， 这 说 明了 它 在 数据 库 中 的 存储 方式 。 

我 们 还 知道 它 的 格式 只 是 text， 这 定义 了 用 来 收集 标题 的 表单 元 素 。 此 外 ， 格 式 还 可 以 是 
textarea、UrL、coLor、range， 或 者 任何 其 他 有 效 的 HIMLS 输入 类 型 。 虽 然 最 后 这 些 值 
都 是 存储 成 字符 串 ， 但 是 不 同 的 格式 可 以 提示 编辑 器 以 怎样 的 方式 显示 输入 的 数据 。 
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第 9 行 : 


"body": { 
"type" : "object" 多 


第 二 个 属性 是 body， 它 的 类 型 是 object， 说 明 它 不 是 一 个 单一 的 值 ， 而 是 一 组 拥有 各 自 的 
子 模式 的 值 。 然 而 ， 这 个 例子 中 有 两 个 可 供 选择 的 模式 ， 下 面 就 来 解释 一 下 。 


logo 的 设计 要 求 我 们 提供 能 够 适 配 两 个 或 三 个 logo 的 布局 。 图 10-1 显示 了 一 个 样 例 。 





性 redhat es redhat >/ redhat. 














图 10-1:“three up” 样 例 

如 果 有 人 以 前 见 过 类 似 的 设计 ， 他 马上 就 会 意识 到 这 里 缺少 一 个 重要 的 信息 。 当 这 里 只 有 
两 个 logo 时 ， 布 局 会 变 成 怎样 ? 是 保留 原 布 局 ， 让 原本 第 三 个 logo 的 位 置 留 空 3 还 是 换 
一 个 布局 ， 让 每 个 logo 占据 更 大 的 空间 ?这 两 种 选择 将 在 图 10-2 和 图 10-3 中 分 别 表示 。 





| redhat pe/ redhat 














图 10-2: 相同 的 布局 ， 少 一 个 元 素 





| redhat | redhat 














图 10-3: 填 满 所 有 可 用 空间 
我 们 的 模式 很 快 就 能 解决 这 个 问题 ， 这 是 一 个 强大 之 处 。 我 们 可 以 分 别 指定 两 个 logo 或 三 
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个 logo 时 的 布局 ， 实 现 的 方法 是 定义 两 个 不 同 的 模式 与 之 对 应 。 我 们 将 在 第 11 行 开始 ， 
为 body 的 模式 定义 选项 。 
第 11 行 


"oneOf": [ 
{ 


人 
£ 


了 
] 


JSON 模式 提供 了 一 些 关 键 词 ， 使 我 们 的 模式 变 得 更 灵活 ， 包 括 oneof 、anyof 和 atLLOf 。 
这 里 会 使 用 oneof ， 意 味 着 我 们 的 数据 需要 符合 下 面 模式 的 “其 中 一 个 ”， 而 不 是 “全 部 ” 
或 “任何 一 个 ” 


0 oneof 对 应 的 是 一 个 对 象 的 数组 。body 的 数据 需要 与 数组 里 面 的 一 个 (并且 
这 一 个 ) 模式 相 匹 配 。 


第 13 行 









































"title": "Two Up", 
"required": ["logos", "layout"], 
"properties": { 
"layout": { 
"type": "string", 
"enum": ["2up"], 
"options": { 
"hidden": true 
} 
]， 
"logos": {...} 





第 一 个 模式 是 “two up”。 它 有 一 个 Two Up 标题 ， 当 我 们 在 UI 层 切换 模式 时 可 以 使 用 这 个 
标题 。required 字段 告诉 这 个 子 模式 哪些 属性 是 符合 模式 要 求 的 必 选 项 。 这 里 声明 Logos 
和 Layout 两 个 都 是 必 选 项 。 


第 一 个 属性 Layout 的 独特 之 处 在 于 ， 我 们 不 希望 用 户 设置 它 的 值 ， 但 仍 需 要 保存 此 值 并 传 
递 给 模板 。 因 为 它 的 值 是 必 选 项 ， 因 此 符合 模式 要 求 的 唯一 方法 就 是 传人 2up 这 个 字符 串 
作为 Layout 的 值 。 

如 果 需 求 中 要 求 允许 用 户 选 择 想 要 的 布局 ， 那 么 可 以 用 ["2up"， "3up"] 来 替换 enum 的 值 。 


因为 已 经 决定 不 让 用 户 选 择 布局 ， 所 以 给 属性 的 options 项 添加 了 "hidden": true。 这 是 
一 个 在 UI 层 隐 藏 此 值 ， 但 仍然 把 它 传 递 给 模板 的 技巧 。 
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既然 模式 的 布局 已 经 配置 好 了 ， 现 在 转向 希望 用 户 上 传 的 logo。 
第 23 行 : 


"logos": { 
"type": "array", 
"minItems": 2， 
"maxItems": 2， 


"format": "tabs", 
"items": { 

"Sref" : "#/definitions/logo" 
} 


} 


logos 是 另 一 个 独特 的 属性 ， 它 的 数据 存储 方式 既 不 是 字符 串 也 不 是 对 象 ， 而 是 数组 。 既 
然 是 数组 ， 那 么 就 有 几 点 需要 确认 。 例 如 ， 需 要 确认 数组 中 的 最 小 值 和 最 大 值 ， 如 何在 UI 
层 格式 化 这 个 数组 ， 以 及 数组 中 每 一 个 元 素 所 对 应 的 模式 。 


























对 于 Logos， 我 们 设置 minItems 和 maxItems 的 值 都 是 2。 这 说 明 我 们 唯一 的 选择 就 是 传人 
两 个 元 素 ， 对 我 们 的 布局 来 说 是 一 件 好 事 ， 因 为 它 就 是 接受 两 个 元 素 的 。 














与 提示 headline 属性 应 该 作为 text 的 输入 类 型 来 展示 一 样 ， 这 里 指定 format 字段 是 标签 
布局 。 不 过 ， 这 里 的 “标签 ”布局 对 JSON 模式 来 说 没有 任何 意义 ， 这 仅仅 是 一 些 提 示 ， 
告诉 我 们 可 以 将 它 传递 给 使 用 该 模式 的 UI。 标 签 (tabs) 代表 什么 是 由 每 一 个 具体 的 实现 
决定 的 ， 因 此 如 果 format 字段 被 忽略 了 ， 模 式 和 产生 的 数据 仍然 是 有 效 的 。 











最 后 定义 items 字段 ， 这 是 一 个 让 我 们 可 以 定义 数组 元 素 使 用 何 种 模式 的 关键 词 。 在 这 个 
例子 中 ，s$ref 意味 着 正在 使 用 一 个 JSON 指针 。 这 允许 我 们 指向 一 个 外 部 的 定义 ， 而 不 是 
在 内 部 定义 。#/definitions/logo 这 个 值 指示 指针 去 寻找 当前 模式 中 的 根 节 点 #， 然 后 返 
回 definitions/1ogo 中 的 对 象 ， 可 以 在 第 60 行 找到 它 。 











这 里 使 用 一 个 引用 值 的 原因 是 ，“two up” 模 式 和 “three up” 模 式 都 是 对 一 个 logo 使 用 相 
同 的 定义 。 这 意味 着 我 们 可 以 创建 两 个 模式 ， 而 只 需 指定 那些 变化 的 值 。 


此 外 ， 这 里 不 限于 内 部 引用 ， 因 为 Sref 还 可 以 引用 其 他 模式 文件 。 这 样 就 可 以 在 单独 的 文 
件 中 创建 常用 的 模式 ， 然 后 在 其 他 模式 中 访问 它们 。 在 这 个 例子 中 ， 我 们 选择 使 用 一 个 本 
地 引用 ， 下 面 就 来 看 看 它 究 竟 引 用 的 是 什么 。 



































第 60 行 : 


"logo": { 
"title": "Logo", 
"type": "object", 
"oneOf": [...] 


此 处 开始 定义 logo 对 象 。 我 们 给 对 象 命名 一 个 更 可 读 的 标题 ， 即 使 只 是 一 个 首 字母 大 写 的 





80 | 第 10 章 


图 灵 社 区 会 员 leezom(superjavaman.zhangli@gmail.com) 专 享 尊重 版 权 


单词 也 好 ， 然 后 规定 对 象 的 其 余部 分 要 符合 下 列 模式 中 的 一 个 〈 即 oneof)。 可 以 看 到 ， 我 
们 想 提供 两 种 不 同 的 输入 logo 的 方法 ， 而 它们 都 需要 拥有 各 自 的 模式 。 


第 一 种 方法 是 直接 上 传 文件 ， 第 二 种 是 输入 URL。 








第 64 行 : 


{ 
"title": "Upload File", 
"properties": { 

"file": { 
"title": "Logo File", 
"description": "Upload your logo", 
"type": "string", 
"format": "file" 

} 
]， 
"required": ["file"] 


{ 

"title": "Paste URL", 

"properties": { 
i 贡 
"title": "Logo URL", 
"description": "Paste a URL to your logo", 
"type": "string", 
"format": "url" 


} 
]， 
"required": ["url"] 
4 

此 时 就 可 以 设置 oneof 这 个 区 块 里 的 标题 ， 包 括 file 这 个 属性 的 标题 。 这 里 有 一 个 重要 的 
值 ， 就 是 file 属性 的 format 值 ， 它 将 通知 UI 提供 一 个 “选择 文件 ”的 对 话 框 。 但 是 如 果 
用 户 希 望 粘贴 一 个 URL 进来 ， 那 么 可 以 切换 到 第 二 个 模式 ， 它 提供 一 个 URL 字段 ， 并 包 
括 必 要 的 帮助 文本 。 


传递 到 Twig 文 件 
流程 的 最 后 一 步 是 把 所 有 的 信息 传递 到 模板 文件 。 首 先 看 看 有 效 的 数据 是 什么 样 的 : 





























"headline": "This is my headline", 
"body": { 
"layout": "2up", 
"logos": [ 
{ 
"url": "http://www.fea.pub/my-logo.png" 
]， 
{ 
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"file": "path/to/my-other-logo.png" 
} 
] 
} 
} 


我 们 的 Twig 模板 大 概 是 这 样 : 





<div class="logo-wall"> 
{% if headline %} 
<h1 class="logo-wall-headline">{{headline}}</h1> 
{% endif %} 
<div class="logo-wall-logos" data-layout="{{body.layout}}"> 
{% for Logo in body.Logos %} 
<img CLass="Logo-waLL-Logo" 
src="{{ logo.file ?: Logo.UrL }}" /> 
{% endfor %} 
</div> 
</div> 


我 们 从 模式 中 可 以 获取 到 的 第 一 个 信息 就 是 headline 这 个 属性 。 我 们 不 仅 知道 它 的 字段 名 
ML headLine， 还 知道 它 的 值 是 可 选 的 。 因 此 ， 我 们 在 Twig 模板 中 先 判断 一 下 headline 的 
值 是 否 存在 ， 如 果 存 在 ， 那 么 在 Hl 标签 里 把 它 打 印 出 来 。 


再 看 一 下 模式 的 主体 部 分 ， 我 们 使 用 布局 的 值 来 设置 data-layout 这 个 属性 。 在 CSS 中 实 
际 执 行 的 逻辑 随后 会 处 理 ， 不 过 目前 可 以 肯定 的 是 ， 如 有 果 数据 源 中 含有 三 个 图 片 ， 那 么 
body.Layout 将 会 是 3up， 而 如 果 只 有 两 个 ， 那 么 它 会 是 2up。 















































最 后 ， 我 们 知道 logos 属性 是 一 个 对 象 的 数组 ， 包 括 URL 字符 串 或 文件 路 径 字 符 串 。 
Twig 模板 提供 了 一 个 简单 的 方法 来 判断 Logo,fite 是 否 存在 ， 如 果 存在 ， 那 么 使 用 它 ， 如 
果 不 存在 ， 那 么 使 用 togo.url。 


因此 ， 这 个 模式 最 后 提供 了 以 下 内 容 : 


。 定义 所 有 可 能 字段 中 的 内 容 范 例 及 其 数据 类 型 和 建议 的 输入 类 型 ， 以 及 是 否 为 必 选 项 

。 在 把 数据 传递 给 模板 之 前 ， 验 证 其 有 效 性 

。 对 于 创建 模板 时 数据 中 可 能 出 现 的 所 有 变量 ， 给 出 了 一 系列 所 需 的 定义 

。 定义 了 用 户 输入 数据 时 的 用 户 界 面 ， 图 10-4 展示 了 使 用 JSON 编辑 器 解析 模式 (https:// 
github.com/jdorn/json-editor) 的 一 个 例子 



































这 就 是 91 行 JSON 代码 带 来 的 众多 益处 。 对 于 正在 创建 的 设计 系统 而 言 ， 这 是 一 个 传递 理 
念 和 想法 的 完美 工具 ， 否 则 要 用 大 段 的 文字 才能 阐述 清楚 。 
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headline 


body TwoUp $ 


器 $ JSON $ Properties 


logos 日 


Logo1 | Pasts URL 3 


Logo2 器 $ JSON $ Properties 


Logo URL 


Paste a URL to your logo 








图 10-4: Jeremy Dorn 的 JSON 编辑 器 


用 这 个 系统 工作 的 每 一 天 ， 我 都 惊讶 于 这 些 模式 能 够 如 此 方便 地 对 模板 进行 改动 或 增加 内 
容 ， 提 供给 开发 人 员 的 交互 方式 也 非常 好 用 。 这 些 模式 免 去 了 很 多 过 去 逐 级 交付 流程 中 的 
主观 猜测 。 

通过 遵循 公共 的 标准 ， 我 们 一 直 在 寻找 可 以 给 设计 系统 带 来 价值 和 功能 的 第 三 方 工具 。 对 
模式 系统 的 坚持 所 带 来 的 回报 是 多 方面 的 ， 以 至 于 我 确信 自己 以 后 再 也 不 会 创造 不 带 模式 
的 设计 系统 了 。 这 就 是 模式 驱动 的 设计 系统 的 魅力 。 
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第 四 部 分 





测试 核心 


前 端 架 构 师 的 重要 职责 之 一 就 是 整体 把 控 网 站 和 设计 系统 的 开发 。 然 而 ， 任 何 参 与 过 大 型 
项 目的 开发 人 员 都 很 清楚 ， 自 己 单枪匹马 去 兼顾 项 目的 方方面面 是 不 可 能 的 。 在 人 数 多 达 


儿 证 个 、 





入 系统 的 代码 所 产生 的 影响 。 然 而 ， 这 种 级 别 的 评估 正 是 我 们 需要 的 。 




















每 周 提交 上 百 次 、 代 码 多 达 上 千 行 的 团队 中 ， 仅 靠 一 个 人 根本 无 法 评估 每 一 段 写 


新 代码 给 系统 带 来 的 问题 涉及 方方面面 。 有 些 可 能 会 影响 系统 的 计算 结果 ， 导 致 错误 的 产 
品 价格 ， 有 些 则 可 能 影响 用 户 使 用 购物 车 结算 的 功能 ， 还 有 一 些 问 题 会 影响 网 站 的 视觉 表 


现 ， 


可 能 还 是 无 法 





























的 结果 是 一 样 的 : 销量 下 请 。 幸 运 的 是 ， 它 们 都 有 同样 的 解决 方法 : 测试 ! 


虽然 











用 各 种 测试 工具 来 验证 应 用 程序 是 否 正常 工作 。 





当 你 开始 为 应 用 程序 规划 测试 时 ， 请 记 住 以 下 儿 条 建议 。 


测试 用 例 应 该 在 建站 的 同时 ， 甚 至 在 建站 之 前 就 开始 编写 。 
测试 代码 是 真实 的 代码 ， 应 该 一 起 或 立即 提交 到 系统 代码 库 中 。 
必须 在 所 有 的 测试 用 例 都 通过 之 后 ， 才 能 把 代码 合并 到 主干 中 。 
在 主干 上 运行 测试 工具 ， 结 果 应 该 都 为 通过 。 
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虽然 功能 仍然 可 用 ， 但 是 不 完整 或 不 一 致 的 界面 影响 了 用 户 体验 ， 最后， 就 算 用 户 界 
面 是 完整 的 ， 购 物 车 功能 也 正常 ， 但 在 某 些 特定 设备 上 或 特定 地 区 访问 网 站 时 ， 结 算 流 程 
顺利 完成 。 虽 然 这 些 不 同类 型 的 问题 源 于 代码 库 里 不 同 的 部 分 ， 但 它们 导致 





作为 架构 师 不 可 能 把 所 有 时 间 都 伦 在 检查 每 一 行 提交 到 系统 的 代码 上 ， 但 我 们 可 以 使 


85 





测试 意味 着 那些 对 系统 计算 结果 、 进 行 重要 业务 操作 、 演 染 正确 界面 或 者 提供 流畅 体验 产 
生 不 良 影响 的 代码 不 会 再 被 合并 进去 。 因 此 ， 架 构 师 与 其 尝试 检查 成 千 上 万 行 代码 ， 不 如 
去 关注 构建 高 质量 的 系统 和 完整 的 测试 。 
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第 11 章 


单元 测 斌 





单元 测试 是 将 应 用 程序 分 解 为 尽 可 能 小 的 函数 ， 并 创建 可 重复 的 、 自 动 化 的 测试 用 例 的 过 
程 。 在 同等 条 件 下 ， 这 些 济 试用 例 应 该 一 直 产 生 相 同 的 结果 ， 它 们 是 应 用 程序 的 灵 瑰 ， 并 
为 今后 所 有 应 用 程序 的 代码 提供 构建 的 基础 。 如 果 没 有 单元 测试 ， 不 常 使 用 的 函数 可 能 
达 数 月 都 不 会 被 发 现 有 bug; 相反 ， 通 过 使 用 单元 测试 ， 我 们 可 以 在 任何 代码 合并 到 主干 
之 前 就 验证 每 个 系统 函数 的 功能 ， 不 会 等 到 代码 实际 应 用 到 产品 中 时 还 会 出 现 问题 。 








前 端 架构 师 的 主要 责任 是 保证 开发 者 拥有 尽 可 能 高 效 的 开发 工具 。 单 元 测试 就 是 其 中 之 一 ， 
它 可 以 用 于 构建 任何 规模 的 应 用 ， 无 论 构建 应 用 程序 逻辑 的 主要 语言 属于 前 端 语言 还 是 后 
端 语言 ， 你 都 有 大 量 的 工具 可 以 应 用 到 工作 流 中 。 无 论 使 用 的 是 PHP 的 PHPUnit、Node 的 
NodeUnit， 还 是 JavaScript 的 QUnit， 你 都 能 找到 用 于 构建 单元 测试 的 成 熟 稳 定 的 平台 。 


虽然 技术 栈 (和 与 之 相关 的 测试 ) 有 可 能 留 给 软件 架构 师 来 决定 ， 但 前 端 开发 人 员 写 出 的 
代码 可 能 也 需要 测试 。 因 此 ， 熟 悉 尽 可 能 多 的 测试 工具 很 重要 。 掌 握 所 有 工具 ， 甚 至 达到 
精通 的 程度 ， 那 是 非常 奢侈 的 。 但 如 果 对 基本 概念 有 着 深刻 的 理解 ， 将 能 帮助 你 和 你 的 团 
队 编 写 出 更 加 可 测试 的 代码 ， 并 快速 地 掌握 任何 测试 框架 。 


























下 面 首 先 来 回顾 一 下 这 些 基本 概念 ， 然 后 再 来 看 一 些 实际 的 代码 。 


11.1 单元 

“一 次 只 做 一 件 事 ， 并 把 它 做 好 ”是 构建 基于 单元 测试 的 应 用 程序 的 原则 。 我 们 在 写 函 数 
时 经 常 想 同时 实现 很 多 功能 ， 结 果 最 后 不 仅 降 低 了 效率 ， 还 增加 了 测试 的 难度 ， 因 为 这 样 
的 函数 无 法 复 用 。 

















87 


图 灵 社 区 会 员 leezom(superjavaman.zhangli@gmail.com) 专 享 尊重 版 权 


思考 一 个 简单 的 函数 : 通过 客户 的 地 址 ， 计 算出 将 产品 从 最 近 的 分 拨 中 心 运输 给 客户 的 运费 。 


下 面 来 分 解 一 下 这 个 函数 。 函 数 要 做 的 第 一 件 事 是 通过 客户 的 地 址 找到 最 近 的 分 拨 中 心 ， 然 
后 使 用 分 拨 中 心 的 地 址 ， 计 算出 分 拨 中 心 到 客户 地 址 的 距离 ， 最 后 ， 使 用 这 个 距离 ， 计 算出 
将 货物 从 点 A 运输 到 点 B 的 费用 。 因 此 ， 虽 然 只 有 一 个 函数 ， 它 却 做 了 3 件 相 互 独立 的 事 : 


























(1) 根据 地 址 找到 最 近 的 分 拨 中 心 
(2) 计算 两 个 地 址 之 间 的 距离 
(3) 根据 距离 计算 运费 


回顾 一 下 “一 次 只 做 一 件 事 ， 并 把 它 做 好 ”的 理念 ， 很 明显 可 以 通过 3 个 独立 的 函数 更 好 地 
实现 通过 地 址 来 查询 运费 的 功能 。 当 我 们 对 功能 进行 拆 分 后 ， 就 可 以 得 到 3 个 国 数 : 一 个 根 
据 地 址 找到 最 近 的 分 拨 中 心 ， 一 个 计算 两 个 地 址 之 间 的 距离 ， 还 有 一 个 根据 距离 计算 运费 。 


11.1.1 更 多 重用 

现在 ， 这 3 个 国 数 可 以 在 整个 应 用 中 使 用 了 ， 而 不 只 是 用 来 计算 运费 。 如 果 程 序 的 其 他 部 
分 需要 找到 最 近 的 分 拨 中 心 或 者 计算 两 个 地 址 之 间 的 距离 ， 可 以 直接 调用 这 些 已 经 写 好 的 
国 数 。 现 在 ， 在 较 大 的 函数 体 中 ， 我 们 不 用 一 遍 又 一 遍地 重 写 功能 相同 的 模块 了 。 























11.1.2 ”更 好 的 测试 


我 们 可 以 测试 每 个 独立 且 可 重用 的 函数 ， 而 非 测试 应 用 程序 所 能 计算 的 每 一 条 运输 路 线 。 
随 着 应 用 程序 的 发 展 ， 开 发 一 个 新 功能 所 需要 创建 的 新 函数 越 来 越 少 。 最 终 ， 我 们 用 较 少 
的 低 复 杂 度 的 函数 完成 了 高 复杂 度 的 功能 


11.2 ”测试 驱动 的 开发 

大 多 数 人 在 首次 接触 单元 测试 时 ， 可 能 写 过 一 些 功能 代码 以 满足 业务 需求 (比如 上 文中 的 
计算 运费 的 例子 )， 然 后 也 努力 地 将 它 重 构 为 更 小 的 、 可 重用 的 、 可 测试 的 代码 ， 之 后 才 
去 思考 如 何 写 测试 用 例 。 测 试 驱动 的 开发 (testdriven development，TDD) 则 颠倒 了 这 一 
思路 ， 它 将 单元 测试 放 在 第 一 位 ， 之 后 才 是 编写 功能 代码 。 


但 如 果 为 还 没有 创建 的 函数 写 测试 用 例 ， 那 些 函 数 岂 不 是 肯定 无 法 通过 测试 吗 ? 的 确 ! 但 
测试 驱动 的 开发 的 目标 是 ， 通 过 测试 用 例 来 描述 一 个 正确 编写 的 系统 应 如 何 工作 ， 并 为 实 
现 这 个 系统 来 铺 平 道路 。 


对 于 上 文 提 到 的 计算 运费 的 例子 ， 在 测试 驱动 的 开发 中 会 为 三 个 实现 业务 需求 的 函数 分 别 
编写 单元 测试 。 开 发 者 的 工作 就 是 将 一 开始 没有 通过 单元 测试 的 函数 变 为 能 够 通过 测试 的 
国 数 。 首 先 实 现 一 个 可 以 正确 地 查找 出 最 近 的 分 拨 中 心 的 位 置 的 国 数 ， 并 通过 第 一 个 单元 
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测试 。 然 后 ， 继 续 实现 计算 距离 和 计算 运费 的 函数 ， 最 终 得 到 三 个 通过 与 之 对 应 的 单元 测 
完成 上 述 步骤 后 ， 我 们 不 仅 实现 了 应 用 的 计算 运费 的 功能 ， 还 让 这 些 函 数 有 了 完全 的 测试 


覆盖 率 


-EL To 


11.3 一 个 测试 驱动 的 例子 

单元 测试 的 核心 理念 其 实 非常 简单 。 它 的 基本 思路 是 调用 要 测试 的 函数 ， 传 递 一 些 预 先 设 
置 好 的 参数 ， 并 描述 结果 应 该 是 什么 。 下 面 来 看 看 如 何 为 通过 给 定 距离 来 计算 运费 的 国 数 
设计 功能 测试 : 

















function calculateShipping(distance) { 
switch(distance) { 

case (distance < 25): 
shipping = 4; 
break; 

case (distance < 100): 
shipping = 5; 
break; 

case (distance < 1000): 
shipping = 6; 
break; 

case (distance >= 1000): 
shipping = 7; 
break; 

} 


return shipping; 


QUnNnit.test('Calculate Shipping' ,function(assert) { 
assert.equal(calculateShipping(24),4,"24 Miles"); 
assert.equal(calculateShipping(99),5,"99 Miles"); 
assert.equal(calculateShipping(999),6,"999 Miles"); 
assert.equal(calculateShipping(1000),7,"1000 Miles"); 
}; 


QUnit (https://qunitjs.com/) 有 多 个 用 于 测试 断言 的 操作 符 ， 包 括 用 于 测试 布尔 值 的 
ok() 和 用 于 比较 复杂 对 象 的 deepEqual()。 在 这 个 例子 中 ， 我 们 使 用 equal() 来 比较 
calculateShipping() 的 返回 值 与 期 望 值 。 只 要 calculateShipping(24) 返回 的 是 4 (这 个 
例子 中 确实 将 返回 4)， 这 个 单元 测试 就 能 通过 。 第 三 个 参数 一 一 24 Miles 一 一 用 来 在 测试 
输出 中 标记 相应 单元 测试 的 结果 。 


上 文中 通过 距离 计算 运费 的 单元 测试 (当然 也 包括 其 他 函数 的 单元 测试 ) 就 绪 后 ， 我 们 
就 掌握 了 一 个 测试 集 ， 通 过 运行 该 测试 集 可 以 确认 系统 能 否 正常 工作 。 如 果 有 人 要 改 
calculateshipping() 的 函数 名 或 者 运费 ， 这 个 测试 集 就 会 反馈 提示 失败 ， 因 此 我 们 能 够 在 
有 问题 的 代码 部 署 到 生产 环境 之 前 就 修复 它们 。 
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QUnit 的 功能 远 远 不 止 上 文 例子 中 提 到 的 。 举 例 来 说 ， 它 可 以 测试 同步 函数 ， 也 可 以 测试 异 
步 函 数 ， 它 还 可 以 与 单元 测试 中 加 载 的 Web 页 面 进行 交互 (其 实用 JavaScript 都 能 实现 )。 
因此 ， 如 果 你 的 单元 测试 包括 用 户 点 击 鼠标 或 按 下 键盘 时 的 返回 值 ，QUnit 也 能 够 支持 。 


11.4 ”测试 覆盖 率 要 多 大 才 足 够 

确定 合适 的 测试 覆盖 率 是 很 难 权衡 的 一 件 事情 。 如 果 你 不 是 在 进行 测试 驱动 的 开发 (这 种 
开发 中 ， 没 有 代码 是 不 需要 单元 测试 的 )， 那 么 确定 测试 覆盖 率 将 非常 重要 。 如 果 测 试 所 
有 的 代码 ， 开 发 进度 可 能 停 澡 不 前 ; 而 如 果 测 试 不 够 ,就 有 汤 掉 新 问题 的 风险 。 


11.4.1 解决 分 歧 点 

如 果 为 已 有 的 项 目 设计 单元 测试 ， 大 部 分 情况 下 ， 你 可 能 没有 时 间或 者 预算 为 现 有 的 功能 
编写 100% 覆盖 率 的 测试 集 。 但 这 不 是 问题 ! 测试 覆盖 率 的 好 处 是 ， 即 使 一 个 单一 的 测试 
也 能 够 为 系统 建设 贡献 价值 。 因 此 ， 在 决定 从 哪里 开始 写 单元 测试 时 ， 可 以 从 能 够 获得 最 
大 收益 的 地 方 开始 。 有 了 时候 ， 最 大 的 收益 就 是 为 系统 最 简单 的 部 分 编写 单元 测试 。 就 像 在 
处 理 更 重要 的 债务 之 前 ， 先 还 清 小 额 信用 贷款 一 样 ， 写 一 些 简单 但 仍 有 价值 的 测试 用 例 是 
为 单元 测试 造势 的 好 方法 。 


一 旦 有 了 能 提供 基本 禾 盖 率 的 测试 集 ， 就 可 以 开始 寻找 系统 中 最 关键 的 部 分 ， 或 者 过 去 频 
繁 出 问题 的 部 分 ， 在 需求 列表 中 为 它们 分 别 创建 需求 ， 并 确保 尽快 推动 这 些 需 求 。 
















































































11.4.2 ”从 测试 覆盖 率 开 始 

如 果 有 幸 作 为 前 端 架 构 师 启动 全 新 的 项 目 ， 你 的 工作 就 不 仅仅 是 设置 好 测试 框架 了 ， 还 要 
确保 开发 流程 本 身 为 单元 测试 做 好 了 准备 。 就 像 写 文档 和 进行 代码 审核 一 样 ， 写 单元 测试 
也 要 花 不 少时 间 。 你 需要 确保 任何 需要 测试 的 需求 都 有 额外 的 时 间 来 编写 单元 测试 ， 并 且 
确认 所 需 的 测试 覆盖 率 。 











在 Red Hat 公司， 每 个 用 户 故事 都 始 于 一 系列 的 任务 ， 包 括 用 于 开发 并 验证 该 功能 所 需 的 
测试 覆盖 率 ， 并 为 此 预 留 了 时 间 。 如 果 一 个 新 功能 需要 花费 8 个 小 时 开发 完成 ， 我 们 要 确 
保 另外 预 留 2 个 小 时 来 编写 用 例 并 验证 测试 履 盖 率 。 预 留 的 时 间 通 常 很 难 和 争取， 因此 前 端 
架构 师 通 常 需要 扮演 起 外 交 人 员 和 销售 人 员 的 角色 。 尽 管 这 样 会 多 花费 25% 的 时 间 ， 但 我 
们 知道 这 其 实 会 节省 很 多 后 续 回 头 追 查 bug 的 时 间 。 








正如 前 面 所 说 的 ， 并 不 是 所 有 的 功能 都 需要 同样 的 测试 覆盖 率 。 但 前 提 是 ， 每 一 个 用 户 故 
事 都 是 以 测试 覆盖 率 的 相关 任务 作为 开始 的 。 只 有 当 所 有 人 都 认为 给 这 些 任务 写 测试 用 例 
没有 必要 时 ， 才 考虑 去 掉 它 。 这 样 我 们 才能 确信 ， 对 于 任何 需要 测试 的 功能 ， 都 已 经 安排 
了 足够 的 时 间 去 完成 它们 。 
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第 12 章 


性 能 测试 





任何 测试 的 目的 都 是 为 了 避免 不 流畅 的 用 户 体验 ， 而 糟糕 的 网 站 性 能 正 是 导致 用 户 体验 不 
流畅 的 主要 原因 之 一 。 因 此 ， 性 能 测试 虽然 不 是 针对 系统 或 视觉 问题 的 测试 ， 却 也 是 测试 
库 的 重要 组 成 部 分 。 

















性 能 测试 衡量 的 是 影响 用 户 使 用 网 站 的 流畅 程度 的 关键 指标 ， 包 括 页 面 大 小 、 请 求 数量 、 
首 字 节 时 间 (time to first byte，TTEFB ) 、 加 载 时 间 和 滚动 性 能 。 


性 能 测试 的 关键 是 制定 合适 的 预算 并 坚持 下 去 。 如 何 进行 这 一 步 ， 将 决定 你 的 项 目测 试 的 
有 效 性 。 


ca -Ab 

12.1 制定 性 能 预算 

制定 性 能 预算 是 指 为 每 个 关键 指标 设 定 目 标 值 ， 然 后 在 所 有 代码 合并 或 部 署 之 前 持续 测试 这 
些 指标 。 若 有 任何 一 个 指标 没 通过 测试 ， 则 需要 调整 新 增 的 功能 ， 或 删除 一 些 其 他 功能 。 


正如 财务 预算 那样 ， 很 少 有 人 对 性 能 预算 的 前 景 感到 非常 兴 备 。 对 大 多 数 人 来 说 ， 预 算 
意味 着 花费 更 少 、 获 得 更 少 、 乐 趣 更 少 …… 总 之 就 是 “更 少 ”。 在 一 个 一 直 告 诉 我 们 可 以 
拥有 更 多 的 世界 里 ,，“ 更 少 ” 实 在 是 没什么 意思 。 作 为 设计 师 ， 如 果 不 能 肆意 地 折腾 高 分 
辩 率 图 像 和 全 屏 视频 ， 就 会 觉得 自己 的 创造 力 被 扼杀 了 。 作 为 开发 者 ， 如 果 没 有 CSS 框 
架 、 几 个 JavaScript 框架 和 一 些 jQuery 插件 ， 就 会 觉得 自己 无 法 工作 。 更 少 ” 一 点 都 不 
好 玩 ! 

















作为 一 个 在 过 去 四 年 里 一 直 按 照 财务 预算 生活 的 人 ， 我 很 理解 没有 得 到 自己 想 要 的 一 切 意 
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味 着 什么 。 但 从 好 的 方面 来 看 ， 当 我 真 的 按照 预算 花 了 一 大 笔 钱 时 ， 我 不 会 因此 有 愧 次 感 
或 负债 。 同 理 ， 做 好 预算 让 我 们 能 够 负责 任 地 “消费 ”并 且 不 会 后 悔 。 


正如 财政 纪律 和 财务 预算 那样 ， 用 户 体验 准则 和 性 能 预算 可 以 帮助 我 们 实现 最 终 目 标 ， 即 
创建 一 个 性 能 良好 并 且 对 用 户 有 吸引 力 的 网 站 。 


财务 预算 通常 基于 一 个 人 的 收入 ， 而 性 能 预算 更 多 地 与 外 部 因素 相关 ， 而 不 是 内 部 因素 。 


12.1.1 竞争 基线 
制定 性 能 预算 的 一 种 方法 是 参考 竞争 对 手 。 虽 然 “ 至 少 我 比 某 某 更 好 ”不 能 作为 网 站 性 能 
不 佳 的 借口 ， 但 是 这 种 方法 确实 可 以 保证 你 有 一 定 的 竞争 优势 。 


首先 来 看 几 个 竞争 对 手 的 主页 和 登陆 页 ， 然 后 和 自己 的 网 站 比较 加 载 时 间 、 网 页 大 小 和 其 
他 的 关键 指标 。 你 的 目标 不 是 达到 竞争 对 手 的 水 平 ， 而 是 要 保证 领先 竞争 对 手 20% 甚至 更 
多 。 因 此 ， 如 果 竞 争 对 手 的 产品 列表 页 在 3 秒 内 加 载 完成 ， 那 么 你 就 要 确保 自己 网 站 的 产 
品 列表 页 在 2.4 秒 内 加 载 完成 ， 甚 至 更 快 。 这 些 超 越 竞 争 对 手 20% 的 优势 ， 是 用 户 将 你 和 
竞争 对 手 区 分 开 来 所 需要 的 。 


优化 关键 指标 并 不 能 一 劳 永 逸 ， 它 需要 的 是 持续 监控 。 可 以 确定 的 是 ， 你 的 竞争 对 手 也 正 
在 寻找 方法 来 改善 和 优化 他 们 自己 的 网 站 。 如 果 他 们 也 一 直 参 考 你 的 网 站 来 确定 预算 ， 那 
么 你 其 实 也 在 推动 他 们 减少 性 能 预算 ! 


12.1.2 平均 基准 
不 管 你 的 竞争 对 手 是 谁 ， 把 你 的 网 站 性 能 基线 与 行业 平均 水 准 和 通用 的 最 佳 实例 相 比 较 总 
是 必 不 可 少 的 。 我 们 没有 理由 因为 竞争 对 手 的 落后 而 保持 平庸 。 


































































































HTTPArchive (http://httparchive.org/) 是 个 不 错 的 服务 ， 它 测试 并 记录 了 几 十 万 个 网 站 的 
各 种 性 能 指标 ， 截 至 2015 年 4 月 ， 有 几 个 值得 注意 的 数据 。 








。 页 面 大 小 : 2061KB 。 
。 总 请 求 次 数 : 99。 
。 可 缓存 资源 所 占 比例 : 46%。 











因此 ， 如 果 想 让 自己 的 网 站 比 大 部 分 网 站 都 快 ， 可 以 考虑 设 定 一 个 目标 : 一 个 1648KB 的 
网 站 ， 包 括 79 个 请 求 ， 其 中 44 个 请 求 可 以 缓存 。 这 将 使 你 的 网 站 领先 平均 水 平 20%。 
现在 我 们 已 经 知道 几 个 制定 预算 的 方法 了 ， 那 么 当 我 们 开始 测试 时 ， 需 要 考虑 的 预算 项 目 
有 哪些 呢 ? 
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12.2 原始 指标 


























正 变 得 越 来 越 大 。 从 2014 年 4 月 到 2015 年 4 月 ， 网 站 页 
增长 到 2061KB， 以 每 年 17% 的 速率 增长 。 而 回 到 2011 年 4 月 ， 网 站 页 面 的 平均 


网 站 性 能 最 基本 的 测试 是 看 演 染 页 
12.2.1 页 面 大 小 

网 站 页 面 

1762KB 

大 小 只 有 不 到 769KB | 
虽然 页 面 大 小 六 





F 非 影响 网 站 加 载 速度 的 只 























因素 ， 但 它 确实 对 此 影响 重大 。 














下 所 需要 的 资源， 包括 这 些 资源 的 大 小 和 总 数 。 


面 的 平均 大 小 从 





页 面 过 大 还 有 











其 他 副作用 ， 我 们 知道 越 来 越 多 的 用 户 通过 移动 设备 访问 网 站 ， 而 他 们 妆 为 数据 六 时 人 





费 。 你 的 网 站 页 











的 手机 用 户 花 了 多 少 钱 。 








/说 











4 优化 PNG 图 





























面 越 大 ， 用 户 就 将 支付 越 多 的 费用 ， 尤 其 是 在 发 展 中 
What Dose My Site Cost (http://whatdoesmysitecost.com/) 来 看 看 新 的 图 


\ 的 61% 。 


降低 JPEG 图 片 的 质量 。 
































国家 。 不 
片 轮 播 





当 你 希望 缩减 页 面 的 大 小 时 ， 可 以 从 以 下 几 个 显而易见 的 地 方 开始 。 


片 占 据 页 面 平均 大 省 
片 ， 并 
4 利用 新 的 响应 式 的 <picture> 标记 和 srcset 属性 来 下 载 大 小 合 


适 的 图 





片 。 


4 制定 一 个 预算 ， 如 果 没 有 移 除 任何 图 片 ， 就 不 增加 图 片 大 小 。 
。 太 多 自 定义 字体 很 快 会 使 网 页 变 得 爱 肿 。 
* 制定 一 个 字体 预算 ， 不 考虑 增加 第 二 种 或 第 三 种 字体 。 


4 考虑 必要 的 字体 粗细 ， 因 
4 虽然 图 标 字 体 很 不 错 ， 但 要 注意 文件 大 小 ， 
如 果 一 个 网 站 只 使 用 字体 文 伯 
文件 。 也 可 以 考虑 使 用 内 联 SVG 代替 图 
图 标 字体 了 。 


多 





。 JavaScript 框架 、 


代 浏 览 器 时 。 


jQuery 插 
4 很 多 网 站 都 已 远离 jQuery， 因 为 vanilla JS 就 可 以 满足 其 





因为 

















图 标 字 
F 的 一 部 分 ， 其 他 网 站 使 用 另外 的 部 分 ， 那 就 拆 分 字体 
标 字 体 ， 只 加 载 需 要 的 SVG 就 可 以 得 到 很 


体会 使 字体 文人 


然 试 试 访问 
功能 让 德国 


为 每 增加 一 种 粗细 变化 ， 都 会 使 字体 文件 增加 几 千 个 字 





























需求 ， 尤 其 是 网 


4 jQuery 播 件 虽 然 可 能 会 提供 一 些 很 厉害 的 功能 ， 却 常常 使 页 面 大 小 显著 


在 现代 浏览 器 上 使 用 CSS 能 否 达到 同样 的 效果 ， 并 在 低 版 本 浏 
4 像 Angular 或 者 Ember 这 样 的 大 型 JavaScript 框 


架 也 许 





[Ua 


网 本 


成 你 的 工作 ， 


会 已 二 


有 上 元 


上 合 到 


ee 


i 件 和 CSS 框架 常常 使 页 面 大 小 增加 很 多 ， 却 收效 其 微 。 


站 只 针对 现 


增加 。 考 虑 
地 回 退 。 
但 生成 的 网 





页 大 小 会 超出 实际 工作 的 需要 。 如 果 只 需要 使 用 Angular 的 视图 层 ， 那 么 最 好 使 用 
React 或 Mustache 来 灰 换 。 
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4 CSS 框架 往往 是 乱七八糟 的 。 它 包含 可 能 会 用 到 的 所 有 想象 得 到 的 样式 。 虽 然 这 对 
于 网 页 快速 成 型 很 有 帮助 ,但 从 现 有 的 几 千 字 节 的 CSS 和 JavaScript 出 发 来 构建 网 站 ， 
会 让 你 在 开始 写 第 一 行 代 码 之 前 就 陷入 困境 。 


。 使 用 压缩 。 
4 JavaScript 可 以 在 构建 流程 中 以 编程 的 方式 进行 压缩 ， 而 且 可 以 在 服务 器 将 文件 发 送 
到 浏览 器 之 前 使 用 gzip 压缩 。 这 些 都 是 缩减 网 页 大 小 的 关键 步骤 。 









































12.2.2 “HTTP 请 求 次 数 

浏览 器 对 页 面 演 染 所 需 的 每 个 文件 都 要 进行 HTTP 请求。 因为 每 个 浏览 器 对 HTTP 请 求 的 
次 数 有 单 域名 并 发 限制 ， 所 以 大 量 单独 的 文件 意味 着 浏览 器 必须 进行 多 轮 并 发 请 求 。 在 速 
度 较 慢 的 网 络 环境 中 ， 这 么 多 并 发 请 求 会 造成 很 复杂 的 影响 。 因 此 ,减少 获取 所 需 文 件 的 
并 发 请 求 次 数 ， 效 果 会 很 显著 。 


可 以 通过 如 下 的 方法 减少 并 发 请 求 次 数 。 











。 减少 HTTP 请 求 的 次 数 。 
4 不 要 提供 数 十 个 单独 的 CSS 文件 和 JavaScript 文件 ， 而 是 把 它们 合并 到 一 个 文件 中 。 
4 把 多 个 单独 的 图 像 文件 合并 成 一 个 图 像 映射 或 者 图 标 字 体 。 有 很 多 不 错 的 工具 ( 例 
如 Compass 和 Grunt/Gulp 插件 ) 可 以 帮 你 自动 化 地 完成 这 些 任 务 。 
4 延迟 加 载 页 面 最 初 加 载 所 不 需要 的 资源 。 这 可 能 是 直到 用 户 与 页 面 交 互 才 需 要 的 
JavaScript 文件 ， 也 可 能 是 初始 加 载 窗口 之 下 距离 较 远 的 图 片 。 


。 增加 六 览 器 每 次 并 发 请 求 的 资源 个 数 。 
4 分 拆 你 的 资源 到 不 同 的 服务 器 (或 者 CDN)， 可 以 使 得 浏览 器 单 次 并 发 下 载 更 多 的 
资源 ， 因 为 浏览 器 的 并 发 请 求 数量 限制 是 针对 单个 服务 器 的 。 
12.3 计时 度量 
除了 站 点 的 资源 数量 和 大 小 ， 还 有 其 他 的 计时 度量 会 影响 用 户 对 网 站 性 能 的 体验 。 
























































首 字 节 时 间 
首 字 市 时 间 是 指 从 浏览 器 请 求 网 站 页 面 开始 ， 到 浏览 器 接收 到 第 一 个 字 节 之 间 的 毫秒 
数 。 这 个 数值 用 来 测量 浏览 妖 和 服务 器 之 间 的 连通 路 径 ， 包 括 DNS 查询 、 初 始 连接 和 
数据 接收 。 它 并 不 是 判断 站 点 性 能 的 最 佳 标准 ， 却 是 一 个 值得 关注 的 指标 。 




















开始 泻 染 时 间 
更 有 价值 的 计时 度量 是 “开始 演 染 时 间 ”。 这 个 度量 是 指 用 户 开始 在 页 面 上 看 到 内 容 的 
时 间 。 这 意味 着 所 有 阻塞 演 染 的 文件 都 已 经 加 载 完 成 ， 浏 览 器 已 经 开始 演 染 文档 模型 
了 。 可 以 通过 以 下 方式 优化 开始 泻 染 时 间 : 延迟 加 载 阻 塞 演 染 的 JavaScript 和 CSS 文 























94 | 第 12 章 


图 灵 社 区 会 员 leezom(superjavaman.zhangli@gmail.com) 专 享 尊重 版 权 





件 、 将 关键 的 CSS 代码 内 联 到 页 面 头 部 、 用 数据 URI 代替 图 片 资源 ， 以 及 延迟 加 载 所 
有 在 文档 模型 泻 染 完成 后 才 下 载 的 资源 。 

















文档 完成 时 间 
只 要 最 初 请 求 的 资源 已 经 加 载 成 功 ， 就 可 以 认为 文档 “完成 ”了 。 文 档 完成 时 间 不 包括 
JavaScript 中 拉 取 资源 消耗 的 时 间 ， 因 此 延迟 加 载 的 资源 不 会 影响 这 个 指标 。 


12.4 混合 度量 标准 
混合 度量 标准 不 是 度量 离散 的 值 ， 而 是 根据 多 个 性 能 指标 综合 打分 得 出 。 

















12.4.1 PageSpeed 分 数 


PageSpeed (https://developers.google.com/speed/pagespeed/insights/) 是 Google 开发 的 网 站 
工具 和 Chrome 浏览 器 的 扩展 程序 ， 用 来 分 析 站 点 的 性 能 和 网 站 的 可 用 性 ， 它 给 出 一 个 用 
百分比 表示 的 分 数 ， 并 解释 了 提高 分 数 的 方法 。 测 试 包括 ; 


。 是 否 存 在 阻塞 演 染 的 JavaScript 或 者 CSS 
。 重 定向 至 登陆 页 

。 图 片 优化 

。 文件 压缩 

。 服务 器 响应 时 间 

。 服务 器 端 压缩 

。 浏览 器 端 缓存 

。 点 击 目标 的 大 小 

。 窗口 可 见 区 域 的 配置 

。 清晰 的 字体 大 小 


12.4.2 Speed Index 指 标 


根据 Speed Index 项 目 主 页 上 的 描述 ，Speed Index (https://sites.google.com/a/webpagetest. 
org/docs/using-webpagetest/metrics/speed-index) 指 的 是 页 面 可 见 部 分 展示 完成 的 平均 时 间 ， 
该 指标 通过 用 毫秒 表示 ， 并 取决 于 视图 端口 的 大 小 。 


混合 度量 标准 的 分 数 考 虑 了 上 述 多 个 单一 的 度量 标准 ， 并 将 这 些 标准 和 页 面 加 载 时 用 户 可 
以 实际 看 到 的 标准 结合 起 来 。Speed Index 是 度量 终端 用 户 实际 体验 的 最 好 标准 之 一 。 
* Ab 2 -上 
12.5 “设置 性 能 测试 
现在 我 们 已 经 知道 可 以 测试 哪些 指标 ， 以 及 如 何 制 定性 能 预算 。 那 么 接 下 来 看 几 个 用 于 自 
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动 化 测试 流程 的 方法 。 不 管 是 测试 站 点 是 一 个 还 是 几 十 个 ， 候 怕 没 有 人 愿意 手动 测试 。 


12.5.1 Grunt PageSpeed 插 件 


我 们 要 了 解 的 第 一 个 测试 流程 自动 化 工具 是 Grunt 的 PageSpeed 插件 (https://www.npmijs. 
comy/package/grunt-pagespeed) 。 顾 名 思 义 ， 这 个 Grunt 插件 可 以 自动 化 地 运行 Google 的 
PageSpeed 来 测试 我 们 的 站 点 。 我 们 能 在 所 有 的 分 支 合 并 请 求 和 后 续集 成 构建 之 前 就 运行 
该 Grunt 任务 , 而 不 用 将 你 的 URL 插入 到 Page Speed 页 面 中 或 使 用 Chrome 扩展 。 
































为 了 设置 Grunt PageSpeed 插件 ， 首 先 使 用 标准 的 命令 安装 和 引入 该 插件 。 





$ npm install grunt-pagespeed --save-dev 


// 加 入 Gruntfile.js 
grunt. loadNpmTasks('grunt-pagespeed'); 


// 在 Gruntfile.js 中 加 入 grunt.initConfig 
pagespeed: { 
options: { 
nokey: true, 
url: "http://redhat.com" 








]5 
desktop: { 
options: { 
paths: ["/en", "/en/services"], 
locale: "en_US", 
strategy: "desktop", 
threshold: 80 
} 
二， 
mobile: { 
options: { 
paths: ["/en", "/en/services"], 
Locale: "en_US", 
strategy: "mobile", 
threshold: 80 
} 
站 


} 
使 用 上 述 人 代码， 我 们 可 以 使 用 base URL 中 的 一 系列 页 面 (这 个 例子 中 是 http://www.redhat. 
com/) 自动 化 地 运行 桌面 端 和 移动 端的 测试 。 只 有 得 分 大 于 80， 测 试 才 会 通过 ;如 果 得 分 
小 于 80， 测 试 就 会 失败 ， 意 味 着 我 们 需要 继续 修改 ， 以 达到 国 值 。 

















12.5.2 ”Grunt Perfbuget 插 件 


另外 一 个 很 好 的 Grunt 工具 是 Grunt Perfbudget (https:/Wgithub.comytkadlec/grunt-perfbudget) 。 
该 Grunt 插件 集成 了 Marcel Duran 的 WebPageTest API (https://github.com/marcelduran/ 
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webpagetest-api) ， 让 我 们 能 以 编程 的 方式 拉 取 WebPageTest (http:/www.webpagetestorg/) 
的 结果 ， 并 将 其 与 我 们 设置 的 预算 相 比 较 。 如 果 你 还 设 使 用 过 WebPageTest， 你 一 定 会 喜 
欢 上 它 的 。WebPageTest 可 以 通过 模拟 不 同 的 网 络 连 接 类 型 和 全 球 的 地 理 位 置 来 测试 网 站 
的 多 个 指标 。 我 不 会 详细 介绍 WebPageTest 的 每 一 项 功能 ， 但 是 花 五 分 钟 看 一 下 你 的 网 站 
的 测试 结果 ， 我 确信 你 会 喜欢 上 WebPageTest 提供 的 一 系列 丰富 的 信息 。 


那么 一 起 来 看 看 如 何在 Grunt 中 配置 它 吧 : 


目前 可 以 在 WebPageTest 的 网 站 (http:/www.webpagetest.org/getkey.php) 上 
申请 API 密 钥 ， 但 它 的 使 用 范围 有 限 。 








$ npm install grunt-perfbudget --save-dev 
// 加 入 Gruntfile.js 
grunt.loadNpmTasks('grunt-perfbudget'); 


perfbudget: { 
default: { 
options: { 
url: 'http://www.redhat.com/en', 
key: 'SEE_NOTE_ABOVE ' ， 
budget: { 
VisuaLCompLete: '4000 ' ， 
SpeedIndex: '1500' 
} 
} 
} 
} 


上 述 设置 使 我 们 可 以 在 Red Hat 主页 上 自动 运行 全 部 的 WebPageTest 测试 集 。 在 这 个 例子 
中 ， 我 设置 视觉 完成 时 间 指 标 为 4000 毫秒 ， 而 Speed Index 指标 为 1500 上 毫秒。 如 果 有 任 
何 测试 返回 结果 超出 预算 ， 那 么 就 会 得 到 一 个 严重 错误 提示 信息 ， 提 示 我 们 重新 审视 最 新 
提交 的 代码 ， 检 查 究竟 是 什么 导致 超出 预算 。 






































12.6 小结 


通过 适当 的 自动 化 测试 流程 和 有 竞争 力 的 预算 ， 你 就 有 了 一 个 很 好 的 起 点 ， 在 此 基础 上 可 
以 持续 开发 新 的 功能 并 改进 网 站 ， 同 时 确保 提交 的 改变 不 会 超出 预算 。 
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第 13 章 


饮 嘻 还 原 测 斌 





告诉 我 ， 这 个 场景 是 不 是 很 熟悉 : 最 近 几 周 以 来 ， 你 一 直 在 做 网 站 的 联系 表 ， 努 力 地 微调 
表单 的 各 种 输入 框 ， 直 到 它们 看 起 来 和 Photoshop 设计 稿 完 全 一 样 。 你 已 经 小 心 缀 翼 地 对 
比 了 所 有 的 内 边 距 、 外 边 距 、 边 框 和 行 高 。 而 且 产 品 负责 人 也 认为 ,“ 以 后 用 这 个 联系 表 
就 可 以 了 ”。 安 全 地 提交 了 代码 之 后 ， 你 开始 下 一 项 工作 ， 并 且 不 再 做 那些 重复 出 现 的 、 
有 关 浏 览 器 下 拉 列 表 泻 染 差 异 的 眶 梦 。 





儿 个 星期 后 ， 你 在 任务 列表 中 惊讶 地 发 现 一 个 熟悉 的 条 目 : 联系 表 。 一 些 设计 师 、 业 务 分 
析 师 或 质量 保证 工程 师 带 着 尺子 来 到 你 的 设计 前 ， 把 它 和 最 新 的 Photoshop 设计 稿 相 比较 ， 
发 现 了 一 系列 差异 。 


但 是 ， 为 什么 呢 ? 难道 有 人 破坏 了 你 的 代码 ? 或 者 有 人 修改 了 设计 稿 ? 追查 罪魁 祸首 对 你 
来 说 大 奢侈 ， 你 没有 那个 时 间 。 因 此 ， 你 坐 下 来 开始 了 一 系列 的 调整 ， 并 且 和 希望 这 是 你 最 
后 一 次 碰 这 个 联系 表 ， 但 同时 也 已 经 向 现实 屈服 : 在 网 站 发 布 之 前 ， 你 可 能 还 要 再 碰 到 它 
几 次 。 


13.1 常见 的 质疑 


在 这 个 世界 上 ， 我 最 喜欢 的 声音 就 是 决策 者 的 尖 叫 :“ 功 能 XX 被 完全 破坏 了 ! ”翻译 为 开 
发 者 的 术语 ， 这 通常 意味 着 一 些 字 体 样式 不 正确 ， 或 者 一 些 垂直 对 齐 需 要 修复 。 这 个 功能 
本 身 有 没有 被 确认 或 达成 一 致 并 不 重要 ， 重 要 的 是 当前 产品 的 样子 和 过 去 一 周 决策 者 一 直 
关注 着 的 Photoshop 设计 稿 有 区 别 。 
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由 于 这 些 在 我 身上 也 发 生 了 一 遍 又 一 各， 下 面 就 来 探索 一 下 导致 这 个 问题 的 常见 原因 ， 以 
及 究竟 是 什么 让 你 像 旋转 木马 一 样 陷 入 死 循环 。 














13.1.1 不 了 解 情 况 的 开发 者 

即使 你 的 代码 完美 无 缺 ， 也 会 被 其 他 开发 者 的 短 短 几 行 不 正确 的 代码 破坏 掉 。 其 他 开发 者 
一 直 在 做 别 的 表单 组 件 ， 并 没有 意识 到 他 们 正在 编写 的 CSS 类 是 和 你 的 联系 表单 共用 的 。 
他 们 可 能 在 你 提交 代码 后 的 几 周 内 编写 了 这 些 代 码 ， 也 可 能 是 和 你 同时 写 出 的 。 





























无 关 的 页 面 上 的 小 样式 的 改动 ， 往 往 会 被 QA 团队 忽略 。 他 们 手 上 有 几 十 个 甚至 上 百 个 页 
看 需要 测试 ， 因 此 疫 办 法 注意 到 标签 字体 上 只 有 两 个 像素 的 改动 。 























13.1.2 不 一 致 的 设计 

请 允许 我 告诉 你 一 个 Photoshop 的 阴险 的 小 秘密 。 当 设计 师 改变 了 某 个 文件 中 的 表单 标签 
字体 时 ， 其 他 PSD 文件 中 的 字体 并 不 会 奇迹 般 地 同步 更 改 。 可 悲 的 是 ， 在 PSD 文件 中 没 
有 了 哪 一 页 是 用 来 级 联 地 说 明 所 有 元 素 的 样式 规范 。 即 便 所 有 的 设计 师 都 知道 字体 更 改 并 修 
改 了 PSD 文件 ， 但 那些 遗留 在 邮件 列表 、BaseCamp 会 话 和 Dropbox 目录 里 的 PSD 文件 依 
然 是 修改 前 的 模样 。 


如 果 有 设计 师 、 业 务 分 析 师 或 质量 工程 师 ， 对 照 着 不 知 哪 个 版 本 的 PSD 文件 审核 了 你 的 联 
系 表 ， 十 有 八 九 他 们 哪 天 会 发 现 你 的 联系 表 是 有 问题 的 也 就 是 他 们 认为 的 “功能 被 完全 
破坏 了 ”)。 然 后 他 们 给 你 创建 一 个 新 的 用 户 故事 去 解决 这 些 问题 ， 而 你 只 能 祈 祷 这 些 改变 
不 会 在 下 一 次 某 个 设计 师 看 到 联系 表 时 给 你 添 更 多 的 麻烦 。 


13.1.3 ” 举 棋 不 定 的 决策 者 


根据 无 限 可 能 性 法 则 ， 如 果 有 足够 多 的 决策 者 仔细 研究 足够 多 的 功能 ， 那 么 百分之百 会 有 
人 发 现 想 要 修改 的 地 方 。 


改动 是 不 可 避免 的 ， 如 果 使 用 恰当 的 开发 模式 ， 那 么 改动 也 是 完全 可 以 接受 的 。 然 而 ， 当 
改动 伪装 成 缺陷 时 (或 者 二 者 之 间 也 不 存在 什么 区 别 )， 开 发 者 最 终 将 花费 大 量 的 时 间 来 
开发 还 处 于 原型 期 的 功能 


























在 公开 发 布 前 对 功能 进行 原型 开发 是 没有 问题 的 ， 事实 上 这 是 很 好 的 实践 。 但 原型 需要 基 
于 设计 快速 迭代 之 后 的 最 终 设计 稿 做 出 ， 最 终结 果 是 一 个 大 家 一 致 认可 的 产品 。 如 果 让 开 
发 者 在 每 个 冲刺 (sprint) 周期 里 开发 原型 ， 又 不 停 地 在 下 一 个 冲刺 周期 里 修改 它 ， 这 不 仅 
会 降低 开发 者 的 效率 ， 也 是 一 种 极为 低 效 的 原型 开发 方法 。 
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13.2 一 个 经 过 测试 的 解决 方案 

虽然 上 述 每 个 场景 都 突出 了 更 深刻 的 组 织 层 面 的 问题 ， 但 它们 都 可 以 通过 适当 的 测试 覆盖 
率 来 缓解 。 我 们 不 去 测试 JavaScript 函数 的 有 效 返 回 结 果 ， 而 是 抓 取 已 授权 的 设计 系统 的 
视觉 外 观 ， 从 而 验证 我 们 没有 偏离 该 系统 。 在 提交 之 前 抓 取 这 些 视觉 还 原 是 保证 设计 系统 
一 致 性 的 关键 。 


视觉 还 原 测试 让 我 们 可 以 将 正在 开发 的 版 本 或 者 即将 部 署 的 版 本 〈 新 版 本 ) 与 正确 的 版 本 
(基线 版 本 ) 进行 视觉 对 比 。 这 个 过 程 只 不 过 是 抓 取 基 线 版 本 的 截图 ， 与 最 新 版 本 进行 对 
比 ， 并 找 出 像素 层面 的 差异 。 


通过 把 这 些 基线 图 片 提交 到 仓库 ， 或 者 在 测试 库 里 将 其 标记 为 通过 ， 我 们 就 对 任何 特定 的 
功能 〈 在 我 们 的 例子 中 为 联系 表 ) 在 像素 级 别 的 视觉 表现 有 了 签名 确认 并 一 致 认同 的 核对 
记录 。 在 任何 代码 提交 到 主 分 支 之 前 ， 视 觉 还 原 测试 提供 了 一 种 测试 网 站 所 有 功能 的 方 
法 ， 以 确保 没有 出 乎 意料 的 视觉 改变 。 

这 样 ， 我 们 对 一 些 原本 由 PSD 文件 不 一 致 导致 的 bug 报告 也 有 了 应 对 措施 。 借 助 于 已 经 签 
名 并 提交 到 代码 库 的 基准 ， 我 们 可 以 跑 一 遍 测试 程序 ， 并 自信 地 回复 道 :“ 我 们 的 代码 没 
有 问题 ， 一 定 是 Photoshop 文件 出 了 问题 。 同样， 我们 也 可 以 借 此 分 辩 真 正 的 bug 和 新 的 


变更 需求 。 


3 IO N MW 
13.3 ”视觉 还 原 测试 的 多 面 性 

借助 于 多 种 技术 和 流程 ， 视 觉 还 原 测试 可 以 有 多 种 风格 。 虽 然 新 的 工具 不 断 地 被 发 布 到 开 
源 社区 ， 但 它们 通常 是 一 小 部 分 功能 的 组 合 。 大 多 数 工 具 可 以 归属 为 以 下 几 类 。 
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基于 页 面 的 比较 
Wraith (https://github.com/BBC-News/wraith) 是 一 个 基于 页 面 的 比较 的 例子 。 它 使 用 
YAML 作为 设置 文件 ， 因 此 可 以 很 轻松 地 比较 来 自 两 个 不 同 来 源 的 一 大 串 页 面 列表 。 
当 你 不 期 望 两 个 不 同 来 源 的 页 面 有 任何 差异 时 ， 比 如 需要 比较 线 上 页 面 和 在 工作 中 即将 
部 署 的 页 面 时 ， 这 个 方法 会 很 合适 。 


























基于 组 件 的 比较 
在 基于 组 件 或 基于 选择 器 的 比较 方面 ，BackstopJS (https://github.com/garris/BackstopJS) 
是 一 个 绝 佳 的 选择 。 基 于 组 件 的 比较 工具 使 你 可 以 抓 取 独立 的 页 面 片段 进行 对 比 ， 这 样 
可 以 写 出 更 有 和 针对 性 的 测试 ， 并 防止 误 报 。 举 例 来 说 ， 如 果 页 面 顶 部 的 组 件 把 所 有 其 他 
组 件 都 挤 了 下 去 ， 那 么 所 有 其 他 的 组 件 就 都 被 误 报 了 。 
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CSS 单 位 测试 
Quixote (https://github.com/jamesshore/quixote) 是 一 类 独特 的 比较 工具 ， 用 于 比较 CSS 
单位 的 差异 而 不 是 视觉 上 的 差异 。Quixote 可 以 设置 TDD 模式 的 测试 用 例 ， 这 些 用 例会 
设置 好 预期 的 CSS 数值 (比如 字体 大 小 为 em， 侧 边栏 的 内 边 距 是 2.5%)， 然 后 检测 
页 面 是 否 满足 这 些 条 件 。 它 还 可 以 诊断 页 面 是 否 遵守 品牌 的 视觉 规范 ， 比 如 logo 的 尺 
寸 是 否 正 确 ， 以 及 logo 与 其 他 内 容 是 否 保持 恰当 的 距离 。 


























基于 无 头 浏 览 器 的 测试 
Gemini (https://github.com/gemini-testing/gemini) 是 一 款 可 以 使 用 无 头 浏 览 器 
PhantomJS (http://phantomjs.org/) 的 比较 工具 ， 它 可 以 在 抓 取 截图 之 前 加 载 Web 页 面 。 
PhantomJS 是 JavaScript 实现 的 WebKit 内 核 的 浏览 器 ， 这 意味 着 它 速 度 非 常 快 ， 并 且 
具有 跨 平 台 的 一 致 性 。 

















基于 桌面 浏览 器 的 测试 
Gemini 非常 独特 ， 它 支持 在 传统 的 桌面 浏览 器 上 运行 测试 用 例 。 为 了 达到 这 个 目的 ， 
Gemini 使 用 Selenium 服务 器 (http://docs.seleniumhq.org/download/) 打开 并 操作 系统 中 
安装 的 浏览 器 。 这 种 方式 没有 基于 无 头 浏 览 器 的 方式 快 ， 而 且 也 受到 系统 安装 的 浏览 器 
版 本 的 影响 ， 但 是 它 更 接近 真实 情况 ， 并 且 可 以 发 现 某 个 特定 浏览 器 引入 的 bug。 





包含 脚步 库 文 件 
CasperJS (http:/casperjs.org/) 是 一 个 导航 脚步 库 ， 可 以 和 PhantomJS 等 无 头 浏览 器 协 
同 工 作 。 该 工具 可 以 和 在 浏览 器 中 打开 的 页 面 进行 交互 。 使 用 它 ， 你 可 以 点 击 按 钮 ， 等 
待 模 态 窗口 ， 填 充 并 提交 表单 ， 最 终 对 结果 进行 截图 。CasperJS 还 可 以 在 PhantomJS 打 
开 的 页 面 中 执行 JavaScript， 你 可 以 隐藏 元 素 、 关 掉 动 画 ， 甚 至 可 以 用 静态 模拟 内 容 替 
代 动 态 真实 内 容 ， 以 避免 由 于 “最 新 博文 ”的 发 布 导 致 测试 不 通过 。 

















基于 图 形 用 户 界 面 的 比较 工具 ， 支 持 更 改 确认 
Diffux 项 目 (https://github.com/diffux/diffuax) 存储 了 测试 历史 数据 ， 并 可 以 在 基于 Web 
的 用 户 界 面 中 提供 测试 结果 的 反馈 。 基 准 图 像 存储 在 数据 库 中 ， 任 何 对 它 的 改动 都 必须 
在 该 应 用 界面 中 标记 为 接受 或 拒绝 。 当 不 懂 技 术 的 股票 持 有 人 需要 确认 每 一 个 变动 是 否 
正确 时 ， 这 些 工 具 就 显得 很 重要 了 。 












































基于 命令 行 的 比较 工具 ， 支 持 更 改 确 认 
PhantomCSS (https://github.com/Huddle/PhantomCSS) 是 一 款 基 于 组 件 的 比较 工具 ， 借 
助 于 PhantomJS 和 CasperJS， 它 可 以 仅 通过 命令 行 来 运行 。 测 试 是 通过 命令 行 终端 运行 
的 ， 无论 测 试 是 否 通 过 ， 其 结果 都 会 输出 到 命令 行 终端 里 。 这 种 类 型 的 工具 尤其 适合 
过 Grunt 或 者 Gulp 运行 ， 而 其 输出 也 很 适合 Jenkins 或 者 Travis CI 等 自动 化 工具 。 











通 








下 一 章 将 介绍 PhantomCSS 以 及 如 何 将 其 集成 到 你 的 项 目 中 ， 同 时 会 涉及 Red Hat 所 使 用 
的 具体 测试 方法 。 
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第 14 章 





14.1 


Red Hat 测 试 方法 


实践 视觉 还 原 测试 


过 去 几 年 ， 我 一 直 使 用 PhantomCSS， 因 为 它 提供 基于 组 件 的 对 比方 法 ， 并 且 它 使 用 的 
无 头 浏 览 器 和 脚本 库 可 以 很 方便 地 集成 到 我 当前 的 系统 构建 工具 中 。 那 么 ， 接 下 来 看 看 
PhantomCSS 的 设置 方法 ， 以 及 它 在 Red Hat 公司 中 是 如 何 使 用 的 。 


14.1.1 


测试 工具 集 


PhantomCSS (https://github.com/Huddle/PhantomCSS) 是 由 下 列 三 种 工具 组 成 的 强大 合体 。 





。 PhantomJS (http://phantomjs.org/) 是 基于 WebKit 内 核 的 无 头 浏 览 器 ， 它 让 你 可 以 快速 








地 浑 染 页 萝 


1， 而 更 重要 的 是 ， 还 可 以 对 页 面 进 行 截图 。 




















。 CasperJS 





(http://casperjs.org/) 是 一 个 导航 和 脚本 工具 ， 





染 出 的 页 











下 进行 交互 。 我 们 能 滑动 鼠标 、 单 击 、 在 文本 村 


通过 它 你 可 以 与 PhantomJS 次 
匡 中 输入 文字 ， 甚 至 在 DOM 市 








点 上 直接 调用 JavaScript 函数 。 


。 ResembleJS (http://huddle.github.io/Resemble.js/) 是 一 个 比较 引擎 , 它 可 以 对 比 两 张 


并 找 出 是 否 有 像素 级 别 的 差异 。 


我 们 也 想 使 整个 测试 过 程 自 动 化 ， 因 此 把 PhantomCSS 集成 到 Grunt (http://gruntjs.com/) 
中 ， 然 后 设置 一 些 自 定义 的 Grunt 命令 ， 用 来 运行 全 部 或 者 部 分 测试 用 例 。 








LA 








片 ， 
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14.1.2 设置 Grunt 


在 你 匆匆 忙 忙 地 从 Google 上 找到 的 第 一 条 链接 下 载 Grunt PhantomCSS 之 前 ， 我 必须 提醒 
你 ， 你 找到 的 下 载 链接 已 经 过 时 了 。 遗 憾 的 是 ， 有 人 占据 了 GitHub 上 Grunt PhantomCSS 
的 项 目 名 称 以 后 ， 就 彻底 消失 了 。 在 这 种 情况 下 ,一些 开发 者 基于 原 有 的 代码 库 重 新 
创建 了 自己 的 Grunt PhantomCSS 项 目 ， 并 持续 合 和 新 的 提交 请 求 ， 从 而 保证 了 Grunt 
PhantomCSS 项 目的 与 时 俱 进 。 其 中 一 个 比较 好 的 实现 是 由 Anselm Hannemann 维护 的 
(https://github.com/anselmh/grunt-phantomcss)。 可 以 通过 如 下 命令 安装 : 





npm i --save-dev git://github.com/anselmh/grunt-phantomcss.git 


Grunt PhantomCSS 安装 成 功 后 ， 我 们 需要 一 些 典 型 的 Grunt 代码 ， 比 如 在 Gruntfile.js 中 加 


载 一 个 任务 。 


grunt.LoadNpmTasks('grunt-phantomcss ' ); 


Gruntfile.js 中 还 要 设置 一 些 PhantomCSS 选项 ， 大 部 分 保持 默认 值 就 行 了 。 


phantomcss: { 
options: { 


mismatchTolerance: 0.05, 
screenshots: 'baseLines ' ， 


results: 'results', 


viewportSize: [1280，800] ， 


]， 
src: [ 
"phantomcss .js 
] 
}， 


。 mismatchTolerance: 我 们 可 以 设置 一 个 视觉 误差 的 国 值 ， 从 而 可 以 解释 抗 饮 此 
(antialiasing) 或 者 其 他 因素 导致 的 非 关键 差异 。 








。 screenshots: 用 于 选择 基准 图 





像 的 存储 目录 。 





。 results: 运行 完 对 比 测试 后 ， 结 果 将 存放 在 这 个 目录 下 。 
。 viewportSize: 用 Casper.js 设置 视 端 窗口 大 小 。 
。 src: 用 于 存放 与 gruntfile 文件 相关 的 测试 文件 的 路 径 。 


14.1.3 ”测试 文件 








下 一 步 是 在 phantomcss.js 文件 中 设置 Casper.js。PhantomCSS 会 启动 PhantomJS 浏览 器 ， 
而 Casper.js 则 用 来 导航 到 具体 的 网 页 并 执行 各 种 所 需要 的 动作 。 我 们 认为 测试 组 件 的 最 佳 


环境 是 在 样式 文档 中 。 它 和 我 


?有 





我 们 可 以 确定 它 不 会 一 天 一 变样 


门 的 线 上 站 点 共享 同样 的 CSS， 而 且 它 也 是 静态 目标 地 址 ， 





。 因 此 ， 我 们 从 使 用 Casper 导航 到 样式 文档 地 址 开始 : 
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casper.start('http://localhost:9001/cta-link.html') 
.then(function() { 
phantomcss.screenshot('.cta-link', 'cta-link'); 
}) 
.then(function() { 
this.mouse.move(' .cta-button'); 
phantomcss.screenshot('.cta-link', 'cta-link-hover'); 


上 
通过 Casper 导航 到 正确 的 页 面 后 ， 我 们 使 用 JavaScript 国 数 链 来 完成 一 系列 所 需 的 截图 。 


首先 选中 .cta-Link 并 进行 截图 ， 如 图 14-1 所 示 。 我 们 巧妙 地 称 它 为 cta-Link。 这 将 是 它 
在 基准 文件 夹 里 的 基本 文件 名 。 


















































baselines 


PRIMARY BUTTON 


cta-link_0.png 











14-1: 基准 库 中 的 cta-tink 图 像 


然后 ， 我 们 需要 测试 按钮 ， 确 保 当 鼠标 悬 停 其 上 时 它 的 表现 符合 预期 。 我 们 可 以 使 用 
CasperJS 在 PhantomJS 加 载 的 页 面 中 移动 鼠标 ， 这 样 我 们 在 抓 取 下 一 张 截图 时 ， 按 钮 可 以 
处 于 悬 停 状态 ， 堆 图 命名 为 cta-Link-hover。 图 14-2 展示 了 结果 。 





























cta-link-hover_1.png PRIMARY BUTTON 





14-2: 基准 库 中 cta-tink 悬 停 时 的 图 片 


14.1.4 对 比 

有 了 这 些 基准 图 片 ， 我 们 就 可 以 多 次 运行 测试 用 例 了 。 如 果 没 有 改动 ， 那 么 后 续 测试 过 程 
中 产生 的 图 片 将 会 和 基准 库 中 对 应 的 图 片 完 全 一 致 ， 所 有 的 测试 用 例 都 会 通过 。 但 是 如 果 
有 改动 的 话 : 















































.cta-link { 
text-transform: lowercase; 


} 
下 次 运行 对 比 测 试 时 ， 我 们 将 会 看 到 图 14-3 中 的 结果 。 





正如 所 料 ， 将 大 写字 母 改 为 小 写字 母后 会 导致 测试 失败 。 不 仅仅 是 文本 有 差异 ， 而 且 按 钮 
也 变 小 了 。 第 三 张 测试 不 通过 的 图 片 ， 用 粉色 标 出 了 两 种 图 片 之 间 的 像素 差异 。” 












































注 2; 图 14-3 的 彩色 图 片 可 从 本 书页 面 (http://www.ituring.com.cn/book/1946) 的 “ 随 书 下 载 ” 部 分 获取 。 
编者 注 
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BOO 加 cta-link_0.png 一 webux 





cta-link_0.png 


PRIMARY BUTTON 


primary button 


cta-link_0.png 





14-3: 一 个 测试 失败 的 例子 


14.1.5 ”运行 全 部 测试 用 例 





了 ， 它 会 进行 如 下 操作 。 


(1) 启动 一 个 PhantomJS 浏览 器 。 

(2) 使 用 CasperJS 指向 样式 规范 中 的 某 一 页 

(3) 对 该 页 面 上 的 单个 单独 组 件 进 行 截图 。 

(4) 与 页 面 进行 交互 点击 mobile 导航 、 菩 停 在 链接 上、 填充 表单 、 提 交 表单 所 
(5) 对 以 上 每 一 个 状态 进行 截图 。 
(6) 将 这 些 截图 与 组 件 的 基准 截图 ( 见 图 14-4) 进行 对 比 。 






























































在 对 每 个 想 要 测试 的 组 件 (或 功能 ) 进行 单独 的 测试 后 ， 我 们 就 能 运行 $grunt phantomcss 





baselines 














14-4: 视觉 还 原 测试 过 程 中 创建 的 所 有 图 片 
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/| 


(7) 如 果 所 有 图 片 都 与 基准 截图 一 致 ， 那 么 测试 通过 (PASS!) ， 如 果 有 改动 ， 那 么 测试 不 
通过 (FAIL!)。 


(8) 对 库 里 的 每 一 个 组 件 和 布局 都 重复 上 述 过 程 。 


14.1.6 如何 应 对 测试 失败 

显然 ， 如 果 你 的 任务 是 修改 一 个 组 件 的 样子 ， 那 么 你 肯定 不 会 通过 测试 ， 这 是 正常 的 ( 见 
图 14-$) 。 关 键 在 于 ， 你 需要 保证 你 只 是 在 你 修改 的 组 件 上 没有 通过 测试 。 如 果 你 要 修改 
的 是 cta-link， 而 你 在 cta-Link 和 翻 页 组 件 上 都 没有 通过 测试 ， 可 能 是 出 现 了 如 下 问题 。 





















































Failure! Saved to /Users/mgodbolt/Sites/webux/baselines/cta-link-hover_1.fail .png 
Visual change found for cta-link-hover_1.png (47.62% mismatch) 

FaiLure!l Saved to /Users/mgodbolt/Sites/webux/baseLinesVcta-Link_0.fail.png 
Visual change found for cta-link_0.png (47.45% mismatch) 


Failure! Saved to /Users/mgodbolt/Sites/webux/baselines/pagination--800_14.fail .png 
Visual change found for pagination--800_14.png (26.92% mismatch) 

Failure! Saved to /Users/mgodbolt/Sites/webux/baselines/pagination-btn-hover_15.fail .png 
Visual change found for pagination-btn-hover_15.png (42.57% mismatch) 














14-5: 跟踪 后 续 测 试 的 失败 报告 


。 你 改 了 不 该 改动 的 地 方 。 也 许 你 的 改动 影响 范围 太 大 ， 或 者 你 无 意 中 修 改 了 其 他 文件 中 
的 按钮 。 不 管 是 哪 种 情况 ， 找 到 翻 页 组 件 被 改动 的 地 方 ， 然 后 修复 它 。 

。 男 一 方面 ,也许 你 对 cta-Link 做 出 的 改动 注定 会 对 翻 页 组 件 有 影响 。 也 许 它们 共享 
按钮 功能 的 混入 , 而 且 为 了 保证 品牌 的 一 致 性 , 它们 应 该 使 用 了 同样 的 按钮 样式 。 这 时 ， 
你 应 该 回 过 头 去 找 这 个 功能 的 创建 人 、 设 计 师 或 者 这 些 改动 的 决策 者 ， 问 一 问 是 不 是 这 
两 个 组 件 本 身 就 应 该 同时 修改 ， 然 后 再 来 决定 。 


14.1.7 ”从 失败 到 成 功 

不 管 翻 页 组 件 有 没有 发 生变 化 ，cta-Link 组 件 还 是 无 法 通过 测试 ， 因 为 旧 的 基准 图 片 已 经 不 
正确 了 。 在 这 种 情况 下 ， 你 应 该 删除 旧 的 基准 图 片 ， 并 提交 新 的 基准 图 片 ( 见 图 14-6)。 如 
果 这 些 外 观 上 新 的 变化 和 品牌 视觉 规范 相 一 致 ， 那 么 新 的 基准 图 片 需要 和 你 的 功能 分 支 代码 
一 起 提交 。 这 样 ， 当 别人 合并 了 你 的 代码 时 ， 这 个 改动 才 不 会 使 导致 他 的 测试 不 能 通过 。 






































































































































Changes to be committed: 
[OC 


modified: baselines/cta-link-hover_1.png 
modified: baselines/cta-link_0.png 

modified: baselines/pagination--800_14.png 
modified: baselines/pagination-btn-hover_15.png 














14-6: 当代 码 改变 了 组 件 的 外 观 时 ， 需 要 提交 新 的 基准 图 片 
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这 种 方案 的 优势 在 于 ， 每 一 个 组 件 的 外 观 无 论 何 时 都 有 一 个 绝对 的 标准 ， 可 以 用 于 和 当前 
组 件 的 样子 进行 对 比 。 你 在 任何 时 候 的 任何 分 支 上 都 可 以 运行 测试 集 ， 而 且 所 有 测试 都 应 
该 能 顺利 通过 ， 而 这 正 是 我 们 构建 系统 的 坚实 基础 。 





14.1.8 ”修改 代码 以 适应 需求 

在 Red Hat 项 目 中 ， 我 首先 使 用 的 是 Anselm 的 代码 ， 而 且 发 现 这 些 代 码 能 够 满足 我 们 
90% 的 需求 ， 但 剩余 的 10% 正 古 整合 工作 流 所 必需 的 。 因 此 ， 正 如 任何 有 自尊 的 工程 师 
所 做 的 那样 ， 我 从 Anselm 的 代码 库 复制 了 一 个 分 支 ， 并 开始 做 一 些 修 改 ， 使 代码 能 够 满 
足 具体 的 实现 。 下 面 就 来 看 一 看 我 对 Node 模块 @micahgodbolt/grunt-phantomcss (https:// 
www.npmjs.com/package/@micahgodbolt/grunt-phantomcss) 所 做 的 一 些 修改 : 








// Gruntfile.js 
phantomcss: { 
webrh: { 
options: { 
mismatchTolerance: 0.05， 
screenshots: 'baselines', 
results: 'results', 
viewportSize: [1280，800] ， 
]， 
src: [ 
// 选择 所 有 以 -tests .js 结尾 的 文件 
'src/library/**/*-tests.js' 
] 
}3 
}, 


14.1.9 将 基准 图 片 放 在 组 件 目录 里 
良好 的 封装 对 我 们 来 说 很 重要 ， 我 们 将 和 组 件 有 关 的 一 切 东西 都 放 在 组 件 目 录 里 (注意 ， 
是 一 切 ! )。 例 如 : 








。 Twig 模板 和 组 件 的 标准 html 标记 

。 描述 模板 有 效 数据 的 JSON 数据 模式 

。 组 件 说 明文 件 ， 用 于 解析 组 件 的 功能 、 选 项 以 及 实现 细节 ， 并 填充 在 Hologram 样式 文 
档 里 
。 用 于 排版 和 布局 的 Sass 文件 
。 用 于 测试 组 件 的 每 一 个 变 体 的 测试 文件 

















因为 上 述 组 件 及 相关 文件 都 已 经 放 在 了 同一 个 地 方 ， 所 以 我 们 也 希望 组 件 的 基准 图 片 同样 
也 放 在 组 件 的 目录 里 ， 这 样 就 能 够 更 方便 地 找到 每 个 组 件 的 基准 图 片 。 而 且 当 一 个 合并 请 
求 包含 由 于 代码 改动 而 产生 的 新 的 基准 图 片 时 ， 也 应 该 放 在 该 组 件 目 录 下 。 


PhantomCSS 的 默认 行为 是 将 所 有 基准 图 片 放 在 同一 目录 下， 不管 测 试 文件 是 在 哪个 目录 。 
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如 有 果 系 统 中 有 几 十 个 组 件 ， 


因此 我 做 的 关键 改动 之 一 就是 为 和 个 测试 文人 




















一 个 组 件 又 有 多 个 测试 文件 ， 
新 建 一 个 baseline 文件 夹 ， 并 


这 种 方法 显然 不 具有 伸缩 性 。 


将 基准 图 片 放 


Ss 














入 其 中 (如 图 14-7 所 示 )。 
Name 
vB api 
pagination.json 
pagination.twig 
v docs 


pagination.docs.json 
男 pagination.docs.md 
v styles 
_pagination.scss 
tests 
| baselines 
pagination--800.png 
=== pagination-btn-hover.png 
3 pagination-link-hover.png 
pagination.tests.js 


pagination.tests.json 





入 Kind 

Folder 
JSON 
Document 
Folder 
JSON 
Markdown 
Folder 
Subli...ment 
Folder 
Folder 

PNG image 
PNG image 
PNG image 
JavaScript 


JSON 











14-7: 一 个 典型 的 组 件 目录 
14.1.10 独立 运行 每 个 组 件 的 








除了 修改 基准 
别 运行 ， 使 它们 相互 独立 而 不 是 耦合 在 一 起 。 


py 

















测试 集 





片 的 路 径 ， 我 还 对 组 件 的 测试 行为 进行 了 修改 ， 可 以 将 每 个 组 件 的 测试 分 





本 


Ba 








此 ， 现 在 可 以 独立 地 测试 每 一 个 组 件 ， 看 








测试 是 否 通过 ， 而 不 是 对 100 多 个 组 件 全 部 况 
14-9 所 示 。 




















| 试 之 后 才能 知道 测试 结果 ， 如 图 14-8 和 图 








Running "phantomcss:webux" 


No changes found for cta-link.png 
No changes found for cta-link-hover.png 


All 2 tests passed! 


No changes found for pagination--800.png 

No changes found for pagination-btn-hover .png 

No changes found for pagination-link-hover .png 
All 3 tests passed! 








hantomcss) task 














图 14-8: 通过 所 有 测试 
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Running“phantomcss:webux” (phantomcss)] task 
Failure! Saved to /Users/mgodbolt/Sites/webux/baselines/cta-link.fail .png 
Visual change found for cta-link.png (47.45% mismatch) 
Failure! Saved to /Users/mgodbolt/Sites/webux/baselines/cta-link-hover.fail .png 
Visual change found for cta-link-hover.png (47.62% mismatch) 

2 tests failed. 


[Re 
Visual change found for pagination--800.png (26.92% mismatch) 
Failure! Saved to /Users/mgodbolt/Sites/webux/baselines/pagination-btn-hover.fail.png 
Visual change found for pagination-btn-hover.png (42.57% mismatch) 
No changes found for pagination-link-hover .png 

2 tests failed. 
Warning: Task "phantomcss:webux" failed. Use --force to continue. 











14-9: 


14.1 


测试 失败 


.11 测试 的 可 扩展 性 


我 所 做 的 最 后 一 个 修改 是 提高 测试 用 例 的 灵活 性 。 我 把 一 个 测试 文件 拆 分 为 几 十 个 测试 文 
件 ， 并 由 Grunt 运行 引入 。 














i Ws 原本 的 实现 首先 要 通过 casper.start('http://mysite.com/pagel') 启动 第 一 个 


测试 ， 多 








然后 通过 casper .thenOpen('http://mysite.com/page2') 启动 其 他 后 续 的 测试 。 这 种 








方法 是 有 问题 的 ， 因 为 Grunt 是 按 字 母 表 的 顺序 运行 这 些 文件 的 。 于 是 ， 只 要 我 新 添加 的 


测试 文 从 














F 名 中 的 首 字母 排 在 当前 测试 文件 名 的 首 字 母 之 前 ， 测 试 集 就 无 法 运行 了 。 
































修改 的 方法 是 ， 在 Grunt 初始 化 任务 时 就 调用 casper.start， 这 样 其 余 的 测试 用 例 就 可 以 
使 用 casper.then0pen 来 启动 了 : 





// cta.tests.js 
casper .then0pen('http://LocaLhost:9001/cta.htmL' ) 


.then(function () { 
this.viewport(600, 1000); 
phantomcss.screenshot('.rh-cta-link', 'cta-link'); 

}) 

.then(function () { 
this.mouse.move(".rh-cta-link"); 
phantomcss.screenshot('.rh-cta-link', 'cta-link-hover'); 


的 3 


// quote.tests. js 
casper .then0pen('http://LocaLhost:9001/quote ' ) 


.then(function () { 
this.viewport(600, 1000); 
phantomcss.screenshot('.rh-quote', 'quote-600'); 
}) 
.then(function () { 
this.viewport(350, 1000); 
phantomcss.screenshot('.rh-quote', 'quote-350'); 





}); 
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14.2 小结 


将 测试 用 例 准 备 就 绪 后 ， 就 可 以 很 自信 地 扩展 设计 系统 ， 添 加 新 的 组 件 、 布 局 和 模型 了 。 
对 每 一 行 新 添加 的 代码 ， 我 们 都 有 一 套 测 试 集 ， 确 保 以 前 的 工作 不 受 影响 。 测 试 覆盖 的 不 
只 是 组 件 的 基本 外 观 ， 还 包括 所 有 可 能 的 变 体 或 交互 时 产生 的 变化 。 当 添加 新 功能 时 ， 我 
们 可 以 同时 编写 相应 的 新 测试 用 例 。 如 果 仍 然 不 慎 出 错 ， 我 们 可 以 在 修复 它 之 后 写 一 个 测 
试用 例 ， 确 保 它 不 会 再 次 发 生 。 


如 此 一 来 ， 当 我 们 给 设计 系统 添加 新 功能 时 ， 会 发 现 管理 起 来 越 来 越 容 易 ， 而 不 是 越 来 越 
困难 。 现 在 我 们 可 以 持续 优化 和 改进 当前 的 组 件 ， 不 用 担心 破坏 其 他 的 组 件 了 。 
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第 五 部 分 


文档 核心 





冯 


面 对 这 一 事实 吧 : 我 们 启动 的 每 个 项 目的 前 端 代码 都 正在 变 得 越 来 越 复杂 。 我 并 不 是 说 这 
是 件 坏 事 ， 只 是 快速 的 成 长 也 带 来 了 更 多 的 问题 。 


就 在 几 年 前 ， 我们 还 把 所 有 的 CSS 放 在 一 个 单一 的 文件 中 ， 并 且 对 每 一 个 样式 使 用 一 长 串 
很 复杂 的 选择 器 ， 以 此 来 确定 页 面 中 对 应 的 元 素 。 如 果 发 现 某 一 个 样式 受到 页 面 上 其 他 样 
式 的 干扰 ， 就 在 文件 底部 写 一 个 有 更 长 的 选择 器 的 新 样式 。 


与 之 类 似 ， 我 们 的 JavaScript 文件 曾经 也 使 用 一 大 堆 JQuery 函数 ， 以 此 对 页 面 中 的 目标 元 
素 应 用 某 些 功 能 。 每 个 函数 都 包含 了 完成 所 需 功 能 的 全 部 逻辑 和 代码 ， 如 果 需 要 对 另外 一 
个 元 素 实 现 稍 微 不 同 的 功能 ， 只 要 简单 地 复制 一 份 代码 ， 修 改 一 下 选择 器 ， 并 更 新 部 分 逻 
辑 即 可 。 


简 而 言 之 ， 我 们 过 去 相当 于 为 每 个 项 目 写 一 个 单独 的 PHP 文件 应 用 程序 。 


之 后 ， 正 如 PHP 开发 者 学 着 将 代码 拆 分 成 可 重用 的 对 象 ， 并 将 代码 组 织 到 不 同 的 文件 中 一 
样 ， 前 端 项 目 也 和 逐渐 摆脱 原先 一 长 串 级 联 指 令 的 形态 ， 开 始 变 得 更 像 一 个 充满 抽象 定义 、 
依赖 关系 和 接口 的 复杂 系统 。 虽 然 我 们 很 快 采 用 了 传统 编程 语言 中 的 面向 对 象 和 多 文件 的 
方法 ， 但 是 很 难 做 到 同步 写 出 完整 的 文档 。 
这 么 多 年 来 我 们 一 直 使 用 声明 式 系统 ， 以 至 于 我 们 对 新 系统 的 理解 在 头脑 中 早已 固化 了 。 
将 头脑 中 这 些 看 似 常识 的 信息 写 到 文档 上 并 非 易 事 ， 但 我 们 因为 没有 文档 而 浪费 的 时 间 比 
写 文档 花费 的 时 间 更 多 。 俗 话说 得 好 : 好 记性 不 如 烂 笔 头 。 
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何 为 文档 

文档 是 系统 设计 的 蓝图 。 没 有 文档 ， 我 们 将 难免 重复 解决 已 经 解决 过 的 问题 ， 而 且 花 大 量 
时 间 查 看 代码 来 寻找 最 简单 的 答案 。 没 有 文档 ， 我 们 的 新 员工 只 能 对 着 系统 抓 耳 搁 腮 ， 并 
怀疑 在 这 种 系统 中 怎么 可 能 完成 自己 的 任务 。 









































回顾 一 下 目前 为 止 我 们 设计 过 的 所 有 架构 ， 如 果 不 花 同等 的 时 间 来 讲 一 下 写 文档 的 方法 ， 
那 简直 是 一 种 罪过 。 写 文档 是 开发 工作 的 一 部 分 ， 而 不 是 等 重要 工作 完成 后 才 开始 的 事 
情 。 就 像 需 要 重 构 的 爱 肿 代码 、 需 要 自动 化 的 低 效率 流程 ， 或 者 没有 被 测试 履 盖 到 的 函数 
一 样 ， 略 过 文档 也 会 欠 下 技术 债 。 


不 要 以 为 文档 只 是 简单 地 写 下 代码 如 何 工作 。 的 确 ， 我 们 需要 在 开发 流程 中 预 留 出 写 文 档 
的 时 间 ， 用 于 记录 我 们 开发 的 代码 是 如 何 工作 的 ， 但 是 写 文档 远 远 不 止 为 每 一 行 代码 写 一 
段 描述 。 


文档 有 多 种 形式 ， 而 其 中 很 多 只 有 在 架构 支持 时 才能 成 型 。 虽 然 有 些 文档 只 是 用 于 描述 每 
个 国 数 的 普通 文本 ， 但 这 种 文档 背后 往往 有 一 套 基于 搜索 、 导 航 和 视觉 呈现 的 构建 系统 。 
其 他 的 文档 用 于 展示 系统 的 资源 ， 由 我 们 所 写 的 样式 、 脚 本 、 模 板 和 模式 来 驱动 。 


静态 文档 


Hologram (https://github.com/trulia/hologram) 是 基于 Ruby 的 通用 文档 工具 ， 你 可 以 在 代 
码 库 中 写 小 段 的 注释 ， 然 后 通过 它 来 收集 这 些 注 释 生 成 的 静态 页 面 。 这 些 Markdown 格式 
的 文档 块 可 以 放 进 你 的 Sass、CSS 或 者 JavaScript 文件 中 。 这 些 文档 块 还 包括 用 于 描述 页 
而 名 称 和 导航 等 相关 信息 的 元 数据 ， 并 且 它 的 书写 形式 完全 自由 。Hologram 让 你 可 以 将 文 
档 内 联 地 写 在 代码 中 ， 这 有 助 于 使 文档 保持 最 新 ， 同 时 使 开发 人 员 总 能 看 到 这 些 文档 。 

























































































SassDoc (http://sassdoc.com/) 是 基于 Node 的 系统 文档 工具 ， 它 宣称 “SassDoc 对 于 
Sass 的 意义 ， 就 像 JSDoc 对 于 JavaScript 的 意义 一 样 "， 而 且 它 的 确 如 此 ! SassDoc 与 
Hologram 有 点 像 , 它 也 依赖 于 代码 中 内 联 的 注释 来 生成 最 终 文档 。 然 而 ，Hologram 是 通用 
的 、 多 功能 的 工具 ，SaasDoc 却 专 注 于 描述 Sass 变量 、 函 数 、 混 入 (mixin)， 以 及 它们 是 
如 何 相互 影响 和 依赖 的 。 如 果 你 正在 构建 一 个 大 型 的 Sass 框架 ， 或 者 一 个 复杂 的 栅 格 或 颜 
色 系 统 ，SassDoc 正 是 你 想 要 的 工具 。 




















代码 驱动 的 文档 

Pattern Lab 是 多 平台 模式 库 工 具 ， 它 使 你 可 以 模块 化 地 开发 设计 系统 ， 并 将 模板 和 CSS 转 
换 成 可 浏览 的 模式 库 。 在 模块 化 的 系统 中 ， 你 可 以 先 开发 每 个 单独 的 模式 片段 ， 然 后 通过 
组 合 这 些 片段 产生 更 复杂 的 模式 。Pattern Lab 提供 了 一 个 基本 框架 ， 用 于 模块 化 地 创建 并 
组 合 这 些 片 段 ， 使 之 成 为 更 复杂 的 模式 ， 其 至 还 能 输出 完整 的 页 面 。 可 预览 的 组 件 库 是 开 
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发 者 、 设 计 师 、 用 户 体验 师 、 质 量 工程 师 和 产品 所 有 者 聚 在 一 起 时 可 以 使 用 的 完美 工具 。 
它 为 设计 系统 中 的 每 个 部 分 创建 了 一 门 通 用 的 语言 和 稳定 的 参照 系 。 








JSON 模式 是 用 于 描述 数据 格式 的 语言 ， 同 时 也 可 以 说 明 数据 的 验证 方式 。 在 前 端 架 构 的 
领域 中 ， 可 以 用 JSON 模式 来 描述 模板 和 模式 所 需要 的 数据 。JSON 超 模式 甚至 可 以 描述 
能 够 通过 HTTP 协议 与 设计 系统 交互 的 方法 ， 包 括 验证 、 泻 染 和 测试 。JSON 模式 是 一 种 
代码 驱动 的 文档 工具 ， 因 为 它 提供 了 验证 和 驱动 编辑 工具 的 功能 。JSON 模式 还 提供 了 可 
读 性 很 强 的 系统 手册 ， 取 代 了 开发 者 实现 一 个 功能 所 需 的 一 大 堆 手写 说 明 。 
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第 15 章 


样式 文档 





既然 样式 表 已 从 一 长 串 的 声明 演化 为 一 个 拥有 变量 、 国 数 和 逻辑 的 系统 ， 那 么 也 要 保证 文 
档 系统 的 演化 能 跟 上 节奏 。Hologram (http://trulia.github.io/hologram/) 提供 了 构建 稳健 的 文 
档 系统 所 需 的 一 切 内 容 。 它 允许 我 们 在 实际 编写 代码 时 ， 直 接 在 Sass 或 者 JavaScript 文件 
中 给 系统 进行 注释 。Hologram 会 自动 收集 这 些 注释 的 内 容 ， 并 转化 为 一 个 含有 泻 染 示例 和 
代码 示例 的 可 访问 网 站 。 这 意味 着 我 们 不 是 在 维护 两 个 单独 的 代码 库 ， 而 是 将 样式 文档 和 
实际 的 设计 系统 结合 在 一 起 。 如 果 有 任何 代码 的 注释 不 够 充分 ， 那 么 它 就 会 很 容易 被 发 现 。 




















在 系统 文档 上 ，Hologram 允许 我 们 在 样式 文档 中 创建 可 访问 的 标准 Markdown 文件 。 这 给 
了 我 们 一 个 绝 佳 的 位 置 去 编写 入门 文档 、 项 目 规则 和 章程 、 联 系 方式 ， 以 及 其 他 任何 需要 
收集 整理 并 展示 给 团队 的 信息 。 





























下 面 快速 了 解 一 下 Hologram 的 配置 ， 然 后 再 看 一 些 文档 的 例子 。 











Hologram 是 一 个 Ruby 库 ， 因 此 我 们 从 安装 库 开始 : 





$ gem install hologram 


15.1 配置 Hologram 
安装 库 之 后 ， 我 们 创建 一 个 YAML 文件 来 配置 Hologram: 


destination: ./docs 

documentation assets: ./doc assets 
code_example_templates: ./code example_ templates 
dependencies: ./build 

source: ./sass 
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接 下 来 仔细 看 代码 的 每 一 部 分 。 

destination 
这 是 Hologram 用 于 输出 静态 样式 文档 的 文件 夹 。 如 果 把 它 设置 为 可 通过 外 部 访问 ， 那 
么 它 将 会 成 为 公共 文件 夹 ， 并 保存 一 切 样式 文档 所 需 的 内 容 。 





documentation_assets 
这 是 用 来 搭建 样式 文档 的 静态 资源 文件 。 我 们 需要 指定 用 于 生成 HTML 的 模板 ， 还 有 
用 于 改进 用 户 体验 的 任何 CSS 或 JavaScript。 这 包括 如 代码 高 亮 、 示 例 布 局 、 导 航 样式 
等 内 容 。 如 果 你 还 不 想 为 了 给 网 站 写 文档 而 去 搭建 男 一 个 网 站 ， 那 么 可 以 在 Hologram 
的 GitHub 页 面 (https://github.com/trulia/hologram#extensions-and-plugins) 底部 所 列 的 
现成 模板 中 挑选 一 个 使 用 。 























code_exampLe_tempLates 
代码 示例 和 它们 在 浏览 器 中 的 泻 染 效果 是 本 样式 文档 的 核心 。Hologram 提供 了 一 种 非 
常 便捷 的 方式 来 自 定义 示例 周围 的 标记 。 下 面 是 Hologram 使 用 的 默认 标记 ， 可 以 根据 
自己 的 需要 随意 修改 : 








<div class="codeExample"> 
<div class="exampleOutput"> 
<%= rendered_example %> 
</div> 
<div class="codeBlock"> 
<div class="highlight"> 
<pre><%= code_example %></pre> 
</div> 
</div> 
</div> 


请 注意 rendered_example ( 演 染 示例 ) 和 code_example (代码 示例 ) 两 个 变量 。 泻 染 示 例 
是 这 个 例子 在 页 面 中 直接 显示 的 效果 ， 而 代码 示例 被 放置 在 <pre> 标签 当中 ， 不 对 其 进行 
演 染 ， 并 且 加 上 了 代码 高 亮 的 类 名 。 图 15-1 展示 了 一 组 代码 示例 的 泻 染 效果 。 




















Example 


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
incididunt ut labore et dolore magna aliqua. 


<div class="quote">Lorem ipsum dolor sit amet, consectetur adipisicing 
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
</div> 











15-1: 一 个 引用 组 件 在 Hologram 样式 文档 中 的 渲染 效果 
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dependencies 


与 documentation_assets 相 


的 资源 。 这 些 路 径 中 包含 编 











source 


最 后 需要 告诉 Hologram 我 们 希望 在 样式 文档 中 出 现 的 文档 放 在 哪 9 
件 可 以 也 应 当 包 括 Sass/CSS、JavaScript/CoffeeScript、HTML 模板 、 图 标 字 体 文件 夹 ， 
以 及 保存 入 门 手 册 、 工 作 流 或 测试 程序 等 内 容 的 文件 夹 。 下 面 来 看 一 个 文档 示例 ， 帮 助 
理解 各 个 值 的 含义 及 其 在 样式 文档 中 该 如 何 显 示 。 


























15.1.1 Hologram 的 文档 注释 块 


区 


下 

















释 中 ， 以 关键 字 “doc” 开 头 : 


/*doc 


title: Primary Button 
Category: Base CSS 


This is our button 


‘html_example 
<a class="btn" href="#">Click</a> 


| 


.btn { 

color: white; 
background: blue; 
padding: 10px; 

border: none ; 
text-decoration: None; 


接 下 来 看 看 代码 中 的 每 个 部 分 。 


作为 Markdown 文 付 





以 ，dependencies 摘 述 了 一 系列 样式 文档 文件 夹 中 需要 包括 
译 后 的 CSS、JavaScript、 字 体 文件 、 图 片 文件 ， 以 及 其 他 
任何 用 于 正确 展示 和 与 样式 文档 中 的 内 容 进 行 交互 的 资源 。 











且 。 这 一 系列 的 源 文 








而 这 个 例子 可 能 出 现在 你 的 _buttons.scss 文件 中 。Hologram 的 内 容 被 放置 在 一 个 CSS 注 


F， 它 允许 我 们 使 用 代码 块 ， 不 管 是 单行 还 是 多 行 。Hologram 带 有 一 个 





自 定义 的 Markdown 演 染 器 ， 采 用 一 些 代码 块 的 关键 字 (html_example、js_example、haml_ 
example， 等 等 )， 这 些 关键 字 不 仅 会 使 标记 带 语法 高 亮 ， 而 且 还 会 把 标记 泻 染 到 页 面 中 。 











图 15-2 显示 了 这 个 按钮 在 Hologram 样式 文档 中 的 泻 染 效果 。 
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Primary Button 
This is our button 
Example 


<a class="btn" href="#">Click</a> 











15-2: 一 个 基础 按钮 在 样式 文档 中 的 泻 染 效果 

title 
这 是 为 这 篇 文档 定义 的 可 读 性 较 高 的 标题 。 

category 
样式 文档 中 的 每 一 个 分 类 (category) 都 有 自己 单独 的 页 面 ， 并 且 在 导航 中 有 其 对 应 的 
条 目 。 你 可 以 在 每 个 分 类 中 添加 任意 数量 的 条 目 。 默 认 模板 会 提供 跳 转 到 每 个 文档 标题 
的 链接 。 






































Documentation body 

在 ”结束 符号 ) 之 后 ， 就 是 文档 的 主体 部 分 。 这 个 区 域 作 为 Markdown 来 解析 ， 因 
此 我 们 不 需要 任何 HTML 标签 ， 就 可 以 轻松 引入 标题 、 列 表 、 链 接 、 图 片 ， 甚 至 还 有 
表格 。 不 过 如 果 我 们 希望 使 用 HTML， 当 然 也 是 没有 问题 的 。 




















15.1.2 ”Hologram 编 译 流程 

Hologram 运行 时 ， 会 遍历 源 目录 中 的 所 有 文件 ， 提 取 所 有 被 /*doc */ 包围 的 内 容 到 样式 
文档 中 ， 然 后 使 用 YAML frontmatter 来 定义 它们 的 标题 和 分 类 。 最 终生 成 的 是 一 个 包含 所 
有 依赖 资源 (CSS、JavaScript、 图 片 ) 和 每 个 分 类 所 对 应 的 HTML 文件 的 文件 夹 。 














每 个 页 面 都 包括 对 应 分 类 下 的 所 有 文档 ， 这 些 标准 HTML 页 面 都 是 由 Markdown 和 代码 块 
转化 而 来 的 。 然 后 ， 这 些 页 面 被 加 入 头 部 和 底部 模板 中 ， 再 补充 上 CSS、JavaScript、 字 体 
和 导航 元 素 。 你 可 以 自 定义 核心 内 容 的 模板 ， 而 如 果 你 将 在 这 个 样式 文档 上 花费 大 量 时 间 
的 话 ， 你 可 能 要 重 写 大 部 分 内 容 ， 并 加 入 你 自己 的 品牌 和 样式 。 

巴 文档 内 容 写 在 广 释 里 面 是 一 种 非常 好 的 做 法 ， 因 为 这 样 可 以 让 文档 紧 挨 在 对 应 的 代码 的 
后 面 ， 而 且 还 不 会 影响 代码 对 我 们 的 设计 系统 风格 的 实际 作用 。CSS 注释 很 容易 在 模块 的 
CSS 中 移动 ， 在 你 需要 发 布 代 码 时 也 很 容易 删除 。 
































De 
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15.1.3 Hologram 小 结 


现在 可 以 在 项 目的 源 文件 中 编写 大 段 的 Markdown 文档 了 ，Hologram 会 收集 它们 ， 并 且 把 
它们 转化 为 一 个 小 型 网 站 ， 我 们 还 可 以 对 网 站 进行 个 性 化 定制 、 添 加 搜索 或 过 滤 等 功能 ， 
或 者 设计 成 符合 企业 品牌 的 风格 。 文 档 甚 至 无 需 跟 代码 处 于 同一 个 文件 中 ， 我 们 可 以 把 文 
档 分 离 出 来 ， 作 为 单独 的 文件 放 在 代码 后 面 。 每 一 个 组 件 都 有 单独 的 文档 文件 ， 它 们 和 样 
式 放 在 同一 个 文件 夹 中 。 另 外 还 有 与 Sass 或 者 JavaScript 完全 无 关 的 文档 ， 它 们 只 记录 项 
目 配 置 和 工作 流 的 信息 。 当 时 ， 我 们 很 快 就 发 现 了 Hologram 文档 的 多 种 用 法 ， 相 信 你 也 
会 跟 我 们 一 样 觉 得 它 非 常 好 用 。 






































15.2 SassDoc 


Hologram 是 一 个 格式 非常 自由 的 文档 系统 ， 它 并 不 关心 它 的 内 容 ， 以 及 它 写 在 什么 类 型 的 
文件 中 。 它 就 像 是 一 张 白 纸 ， 它 是 什么 取决 于 你 让 它 成 为 什么 。 











SassDoc (http://sassdoc.com/) 则 完全 相反 。 它 是 一 个 记录 Sass 的 变量 、 混 入 、 继 承 和 函 
数 的 工具 ， 而 且 对 每 个 注释 块 后 面 的 代码 都 有 严格 的 要 求 。 另 外 ， 它 对 文档 的 呈现 和 风格 
也 很 讲究 。Hologram 只 是 把 文档 分 成 不 同 的 组 ， 而 SassDoc 则 会 自动 建立 起 变量 和 函数 或 
者 混和 人 和 扩展 的 映射 关系 。 如 果 你 在 编写 一 个 大 型 的 基于 Sass 的 设计 系统 或 者 一 个 Sass 
框架 ， 而 且 你 不 想 手写 所 有 的 文档 ， 那 么 SassDoc 将 是 你 的 最 佳 选择 ! 接 下 来 看 看 如 何 开 
始 使 用 SassDoc 。 





15.2.1 安装 SassDoc 

SassDoc 是 一 个 基于 NodeJS 的 文档 系统 ， 而 且 拥 有 Grunt、Gulp 和 Broccoli 的 插件 。 你 
可 以 在 命令 行 中 对 你 项 目 中 的 Sass 文件 运行 SassDoc。 鉴 于 输出 的 内 容 总 是 一 致 的 ， 为 
了 简单 起 见 ， 我 将 演示 命令 行 选项 。 这 种 方式 可 以 让 你 在 不 改动 项 目的 前 提 下 开始 使 用 


SassDoc。 





























我 们 从 把 SassDoc 安装 为 全 局 的 NPM 包 开 始 (再 次 提醒 ， 这 只 是 为 了 能 更 简单 地 试用 
SassDoc， 如 果 在 实际 项 目 中 使 用 ， 你 可 能 不 会 使 用 全 局 选项 ) : 








$ npm install sassdoc --global 


把 SassDoc 安装 进 全 局 NPM 文件 夹 后 ， 就 可 以 直接 在 sass 文件 夹 中 运行 sassdoc 指令 了 : 





sassdoc sass 


这 就 是 它 的 用 法 ! SassDoc 会 帝 历 sass 文件 夹 中 的 所 有 文件 ， 并 提取 出 所 有 符合 SassDoc 
文档 特殊 语法 的 内 容 。 然 后 ， 它 会 使 用 这 些 信息 构建 一 个 功能 齐全 的 静态 文档 网 站 。 接 下 
来 看 一 下 SassDoc 的 语法 ， 以 及 带 有 SassDoc 格式 注释 的 代码 在 编译 后 会 变 成 什么 样 。 
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15.2.2 ”使 用 SassDoc 
SassDoc 使 用 三 个 斜 杠 的 Sass 注释 来 指定 哪些 代码 是 需要 被 纳入 到 文档 中 的 。 你 需要 做 的 
就 是 把 /// 放 在 一 个 混入 、 扩 展 、 函 数 或 者 变量 的 上 面 ， 然 后 SassDoc 就 会 帮 你 做 其 余 的 
事情 。 下 面 是 一 个 仅仅 用 到 两 个 变量 的 例子 

11/ 


$button-padding: lem; 
$button-font-size: 1.2em; 




















在 前 面 的 例子 中 ， 变 量 $button-padding 会 被 导入 SassDoc， 而 变量 $button-font-size 则 
不 会 。SassDoc 能 够 智能 地 抓 取 紧 跟 在 标记 后 面 的 变量 ， 即 使 你 把 两 个 变量 放 在 同一 行 中 ， 
SassDoc 仍然 只 会 导入 第 一 个 。 如 果 你 希望 两 个 都 导入 ， 可 以 这 样 写 ， 






































$button-padding: 1enm; 


/// 


$button-margin: 1.2em; 








仅仅 用 了 两 个 变量 、 六 个 斜 杠 和 一 个 终端 命令 ，SassDoc 就 创建 了 如 图 15-3 所 示 的 文档 。 


一 ARIABLE -一 


button-padding 











$button-padding: lem; 


button-font-size 


$button-font-size: 1.2em; 











15-3: 泻 染 后 的 SassDoc 样式 文档 


哇 ! 我 们 不 需要 创建 任何 模板 文件 或 者 编写 任何 CSS 代码 ， 就 拥有 了 看 起 来 非常 专业 的 ， 
由 静态 HTML、CSS 和 JavaScript 构建 而 成 的 文档 页 面 。 简 单 地 把 代码 推送 到 GitHub 之 
后 ， 你 就 拥有 了 可 以 展示 你 的 系统 的 一 系列 变量 的 文档 。 不 过 ，SassDoc 可 以 做 的 事情 远 
不 止 这 些 ， 这 才刚 刚 开始 。 
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15.2.3 ”探索 SassDoc 
现在 来 创建 另 一 个 变量 ， 并 看 看 SassDoc 的 一 些 注释 类 型 . 





/// A number between 0 and 360 used to find _ foreground color__ 


/// @type Number 
/// access private 
$foreground-adjust: 180 !global; 


这 里 的 变量 前 面 有 几 行 以 三 个 斜 杠 开头 的 SassDoc 注释 ， 它 们 都 会 随 着 变量 名 和 变量 值 被 
一 起 纳入 到 文档 中 。 


注释 块 中 的 第 一 行 往往 都 是 SassDoc 用 于 展示 在 变量 上 方 的 描述 。 描 述 可 以 有 多 行 ， 而 且 
是 作为 Markdown 格式 来 解析 的 ， 因 此 它 支持 标题 、 列 表 、 链 接 和 其 他 任何 你 想 加 入 的 内 
容 ， 只 要 保证 每 一 行 的 开始 都 带 三 个 斜 杠 即 可 。 


在 描述 之 后 ， 我 们 就 可 以 自由 地 使 用 SassDoc 众多 的 注释 类 型 中 的 任何 一 个 了 。 为 首 的 是 
etype 注释 。 如 果 这 个 变量 仅仅 是 另外 一 个 变量 的 引用 ， 或 者 是 一 个 国 数 的 返回 值 ， 那 么 
@type 注释 有 助 于 说 明 这 个 变量 的 类 型 是 字符 串 、 数 字 、 布 尔 值 ， 还 是 映射 。 实 际 上 你 可 
以 使 用 任何 你 喜欢 的 文本 字符 串 来 描述 etype， 因 此 请 写 下 对 读者 最 有 帮助 的 内 容 。 


这 里 使 用 的 另 一 个 注释 是 eaccess。 这 个 注释 有 两 个 可 能 的 值 : private 和 pubLtc。 如 果 你 
有 传统 的 面向 对 象 语言 的 编程 背景 ， 那 么 你 对 变量 和 函数 的 private 属性 一 定 很 熟悉 ， 这 
代表 它们 只 能 在 对 象 内 部 被 访问 ， 而 不 能 被 系统 的 其 他 部 分 所 调用 。Sass 实际 上 并 没有 
这 类 技术 限制 ,但 如 果 创 建 的 是 只 在 内 部 使 用 的 变量 、 函 数 、 混 入 或 扩展 ， 那 就 应 该 把 
@access 设置 为 private。 这 对 你 的 系统 而 言 并 没有 功能 上 的 改动 ， 但 是 它 的 确 告诉 用 户 不 
要 在 他 们 的 样式 表 中 使 用 这 个 变量 ， 因 为 它 随 时 可 能 被 改动 、 移 除 或 重 构 。 


如 图 15-4 所 示 ，@access private 在 变量 的 标题 前 面 加 上 了 [Private] 标记 ， 描 述 按照 
Markdown 语法 全 部 被 解析 出 来 ， 并 且 在 变量 下 方 指明 了 变量 的 类 型 。 




















































































































[Private] foreground-adjust 
$foreground-adjust: 186 !global; 


Description 
A number between 0 and 360 used to find foreground color 


Type 


Number 











15-4: 变量 $foreground-adjust 在 SassDoc 中 的 泻 染 效 果 
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15.2.4 深入 了 解 SassDoc 

既然 已 经 见识 了 Sass 设计 系统 文档 的 基本 用 法 ， 接 下 来 就 看 一 下 一 套 更 完整 的 变量 、 函 
数 、 混 入 和 扩展 的 样子 。 下 面 是 一 个 稍 加 构造 的 按钮 混入 ， 以 及 输出 按钮 CSS 所 需 的 一 切 
内 容 。 


/// Our global button padding 
/// Qaccess private 
$button-padding: 1em !global; 


/// Our global button font-size 
/// Qaccess private 
$button-font-size: 1.2em !global; 


/// A number between 0 and 360 
/// @type number 

/// Qaccess private 
$foreground-adjust: 180 !global; 


/// Function to return a foreground color based 
on a background color 

/// Qaccess private 

/// param {color} $color - The background color 
/// @return {color} 

/// Qexample 

///  @function get foreground(blue); 

/// // yellow 

@function get_foreground($color) { 

@return adjust_hue($color, $foreground-adjust); 


} 


/// Our core button styles 

/// Qaccess private 

%btn-core { 
padding: $button-padding; 
text-decoration: none; 
font-size: $button-font-size; 


} 


/// Our basic button mixin 

/// Qaccess public 

/// @param {Color} $bg_color [red] - Background Color 
@mixin button($bg_color:"red") { 

background: $bg_color; 

color: get_ foreground($bg_color); 

Qextend %btn-core; 


} 
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只 会 调用 这 个 混入 ， 而 永远 不 会 使 用 @extend 





用 担心 破坏 代码 。 








在 这 些 变 量 、 函 数 和 扩展 当中 ，@mixin button 是 系统 中 唯一 对 外 公开 的 部 分 。 这 保证 用 户 











%btn-core、get_foreground 或 者 任何 变量 。 





当 我 们 决定 重 构 这 个 按钮 混入 时 ， 我 们 可 以 移 除 或 改变 这 些 私 有 元 素 中 的 任意 一 个 ， 而 不 





我 们 的 按钮 混入 使 用 了 eparan 注释 ， 它 让 我 们 可 以 记录 混入 所 用 到 的 各 种 输入 参数 ， 然 后 





用 一 种 清晰 且 统 一 的 格式 展示 出 来 。@paran 的 








@param {type} $param_name [default value] 


15.2.5 ”内 部 依赖 


- description 


SassDoc 最 强大 的 功能 之 一 就 是 可 以 自动 列 出 内 部 的 依赖 关系 。 如 有 果 没 有 静默 的 %btn-core 扩 
展 ， 我 们 的 按钮 混入 就 会 失效 。 实 际 上 按钮 混入 还 依赖 get_foreground 国 数 ， 而 SassDoc 
可 以 追踪 所 有 的 依赖 关系 ， 并 把 它们 展示 在 混入 的 文档 底部 。 


综合 所 有 的 内 容 ， 图 15-5 展示 了 这 个 按钮 文档 最 终 的 样子 。 








button 


@mixin button($bg color: red) { 
background: $bg_color; 
color: get_ foreground($bg color); 
@extend %btn-core; 


} 


Description 


Our basic button mixin 


Parameters 

Name Description 
$bg_color Background Color 
Requires 


[function] get_foreground 


[placeholder] btn-core 





Type Default value 


Color 四 








15-5: 按钮 混入 在 SassDoc 中 的 展示 效果 
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%btn-core 占 位 符 并 没有 使 用 任何 新 的 注释 类 型 ， 不 过 我 们 的 按钮 混入 依赖 于 它 ， 而 它 又 
依赖 于 一 些 变量 ， 因 此 那些 依赖 关系 就 自动 地 罗列 出 来 了 ， 如 图 15-6 所 示 。 














[Private] btn-core 


%btn-core { 
padding: $button-padding; 
text-decoration: none; 
font-size: $button-font-size; 
} 
Description 
Our core button styles 


Requires 


[variable] button-padding 


[variable] button-font-size 
Used by 


[mixin] button 











15-6: %btn-core 扩展 在 SassDoc 中 的 展示 效果 





如 图 15-7 所 示 ，get_foreground() 函数 展示 了 @return 注释 的 一 个 例子 ， 它 允许 我 们 描述 
期 望 的 函数 返回 值 的 类 型 。 这 个 函数 还 使 用 了 @example 注释 ， 它 允许 书写 一 个 缩 进 的 代码 
块 来 演示 函数 的 使 用 方式 ， 以 及 如 果 按 照例 子 实现 之 后 会 得 到 什么 样 的 返回 值 。 同 时 注意 
“Requires” 和 “Used by” 这 两 个 区 域 ， 这 些 自动 生成 的 依赖 关系 是 非常 有 价值 的 ， 而 且 它 
们 中 的 每 一 个 都 是 跳 转 到 混入 或 者 变量 定义 的 链接 ， 使 得 文档 非常 易于 浏览 。 
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[Private] get_foreground 


@function get foreground($color) { 
@return adjust_ hue($color, $foreground-adjust); 
上 


Description 


A function to return a foreground color based on a background color 


Parameters 

Name Description Type Default value 
$color The color that needs a complimentary color color 一 

Returns 

Color 

Example 


@function get_foreground(blue); 
// yellow 


Requires 
[variable] foreground-adjust 


Used by 


[mixin] button 











15-7: get_foreground 函数 在 SassDoc 中 的 展示 效果 


15.3 ”小结 


正如 本 章 的 示例 所 阐释 的 ， 静 态 文 档 系 统 可 以 是 获取 设计 系统 中 的 输入 和 输出 的 有 效 途 
径 。Hologram 为 创建 一 系列 开放 和 个 性 化 的 文档 页 面 提 供 了 工具 。 无 论 是 编写 入 门 文档 ， 
还 是 获取 一 个 行动 召唤 (call to action, CTA) 按钮 的 正确 标记 ，Hologram 都 会 提供 充分 的 
灵活 性 ， 让 你 编写 、 归 类 ， 并 且 以 想 要 的 风格 来 展示 。 











如 果 你 在 寻找 为 你 的 Sass 系统 创建 更 严格 和 更 标准 的 视图 的 文档 工具 ， 那 么 SassDoc 就 是 
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你 上 手 的 最 佳 选择 。 虽 然 它 仍然 是 静态 的 文档 工具 ， 但 它 通 过 连接 系统 的 依赖 关系 ， 提 升 


了 构建 文档 的 自动 化 程度 。 


事实 上 ， 这 两 个 工具 不 是 彼此 独立 的 。 很 多 现代 的 样式 文档 是 用 几 种 不 同 的 工具 构建 的 ， 
每 一 种 工具 尽 可 能 用 最 佳 的 方式 来 展示 系统 的 不 同 部 分 。 这 两 个 工具 的 共同 点 在 于 ， 它 们 








都 依赖 大 量 的 用 户 输入 来 发 挥 真 正 的 法力。 作为 静态 文档 工具 ， 它 们 提供 了 一 利 
我 们 能 够 为 正在 搭建 的 网 站 编写 文档 ， 并 把 所 有 的 信息 整理 、 归 类 并 建立 索引 。 





方式 ， 让 


此 外 ， 代 码 驱 动 的 文档 系统 是 另 一 种 方式 。 在 代码 驱动 的 环境 下 ， 文 档 纯粹 是 由 我 们 所 编 








写 的 代码 生成 的 。 下 一 章 将 会 举 一 些 相 关 的 例子 。 
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第 16 章 


图 形 库 





首先 来 介绍 一 下 Brad Frost 的 原子 设计 原则 (http://patternlab.io)， 以 防 读者 之 前 对 此 并 不 
了 解 。 原 子 设计 原则 无 疑 会 改变 你 看 待 网 站 设计 的 方式 ， 因 此 如 果 有 机 会 的 话 ， 最 好 能 够 
深入 研究 一 下 这 个 领域 。 





原子 设计 是 一 种 构建 网 站 设计 系统 的 方法 论 。 它 不 是 一 次 性 地 设计 整个 页 面 ， 而 是 首先 把 
网 页 常用 元 素 分 解 成 各 个 尺寸 的 模式 ， 然 后 再 描述 把 这 些 模式 组 合成 一 个 完整 网 页 的 方 
式 。 这 些 模式 中 不 可 再 分 的 最 小 单位 就 称 为 原子 。 

原子 是 构造 网 站 、 标 题 、 列 表 样 式 、 图 片 、 视 频 和 表单 元 素 的 基本 结构 单元 。 

就 像 大 自然 中 的 原子 能 组 合成 更 复杂 的 东西 ， 原 子 设计 把 多 个 原子 组 合成 分 子 。 在 网 页 设 
计 中 ,，“ 分 子 ” 可 能 代表 一 个 搜索 表单 、 媒 体 块 或 者 导航 栏 。 


正如 多 个 原子 组 成 多 个 分 子 ， 多 个 分 子 组 成 有 机 体 来 创造 界面 的 一 部 分 ， 如 博客 文章 模块 
或 评论 模块 。 















































最 后 创造 出 的 是 模板 ， 它 代表 同一 个 页 面 上 的 多 个 界面 元 素 的 组 合 和 布局 ， 包 括 导 航 栏 、 
内 容 区 域 和 底部 元 素 。 











16.1 何 为 Pattern Lab 


既然 原子 设计 已 经 提供 了 一 种 通过 可 分 解 的 模块 来 组 合成 网 站 的 方法 论 ， 如 果 再 有 一 个 工 
有 具 让 我 们 轻而易举 地 实践 它 ， 把 新 的 网 页 设计 做 成 原型 ， 那 岂 不 是 很 令 人 振奋 ? 而 这 正 是 
Pattern Lab 的 用 武之 地 。 
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Pattern Lab (又 称 PL) 是 一 个 静态 网 站 生成 器 ， 它 可 以 记录 所 有 的 网 站 结构 单元 。 它 把 原 
子 、 分 子 、 有 机 体 和 布局 变 成 可 浏览 的 网 页 ， 你 不 仅 可 以 从 中 看 到 每 个 原子 组 件 ， 还 可 以 
使 用 自 定义 的 内 容 创 造 样 例 页 面 ， 模 仿 实 际 的 网 站 效果 。 





























Pattern Lab 入 门 


Pattern Lab 是 一 个 小 型 网 站 ， 自 带 很 多 CSS 文件 、 模 板 、JSON 数据 文件 ， 以 及 一 个 构建 
系统 (用 来 创造 可 浏览 的 静态 页 面 )。 原 版 本 是 基于 PHP 的 ， 而 我 将 要 演示 的 是 一 个 Node 
版 本 。 开 始 使 用 时 ， 你 可 以 选择 直接 把 Pattern Lab 库 粘 贴 到 你 的 项 目 里 ， 也 可 以 使 用 
Yeoman 这 样 的 工具 来 快速 生成 新 项 目 。 























使 用 Pattern Lab 最 好 的 方式 是 把 它 放 到 当前 的 系统 主题 的 目录 里 ， 或 者 至 少 放 到 能 与 项 目 
共用 文件 的 地 方 。 这 么 做 是 为 了 确保 Pattern Lab 和 你 的 网 站 共用 同样 的 CSS 和 JavaScript 
文件 。 这 样 你 就 可 以 在 Pattern Lab 中 设计 原型 ， 创 造 所 有 必要 的 样式 和 脚本 。 并 且 当 
HTML 在 CMS 系统 里 生效 时 ， 所 有 必要 的 CSS 和 JavaScript 也 已 经 就 位 了 。 


当 Pattern Lab 下 载 完 成 并 安装 好 所 有 相关 的 Node 模块 后 (如 果 你 使 用 的 是 Node 版 本 )， 
用 一 名 命令 就 可 以 让 你 的 PL 网 站 运行 起 来 。Node 版 本 的 运行 命令 为 $ grunt server。 在 
稍 加 编译 并 启动 一 个 简单 的 Web 服务 器 之 后 ， 我 们 会 看 到 一 个 预 置 的 简单 的 样式 文档 ， 有 
原子 、 分 子 、 有 机 体 、 模 板 ， 甚 至 还 有 完整 页 面 的 示例 ， 就 像 图 16-1 所 展示 的 主页 。 
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aliquip ex ea commodo conseauat. i | es 
quae ost fugit distinctio iure cdit minus nen 
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2 weeks ago 
dolorum desarunt omnis vciuptates 
woluptatum 

How to detect and avold poison ivy Tepe 

Lorem ipsum dolor sit amet, consectotur adipisicing elt, sod do nventore dignissimos vel molestiae, rerum, 

aiusmodtemPorincididunt ut labore et dolore magna aiqua. Ut ernim dolcre 

ad minim veniam, quis ncztrud cxercitagicn dlamco laboris nisi ut 2 weeks ago 


aliquip ex ea commodo consequnt 
Follow us cn Tiwitier 














图 16-1， Pattern Lab 里 的 首页 预览 


16.2 ”运行 Pattern Lab 


理解 系统 背后 的 运行 原理 的 最 好 方式 ， 就 是 从 一 个 完善 的 界面 开始 ， 逆 向 推出 系统 的 模 
板 ， 还 有 Pattern Lab 用 到 的 数据 文件 。 因 此 ， 下 面 就 从 广告 图 〈 那 座 山 ) 开始 ， 看 看 如 何 
才能 在 页 面 上 展示 这 种 带 标题 的 图 片 。 












































首先 要 明白 ， 所 有 的 文件 按 不 同 层 级 ， 分 别 放 在 5 个 不 同 的 文件 夹 中 : 原子 、 分 子 、 有 机 
体 、 模 板 、 页 面 。 每 个 模式 都 有 一 个 文件 ， 描 述 组 成 按钮 、 轮 播 图 片 或 底部 导航 栏 的 标 
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记 oo 


联 文 件 ， 








在 页 面 这 一 层级 上 ， 只 需 选 择 模 板 并 添加 内 容 就 可 以 生成 页 面 ， 上 面 的 模式 也 会 有 关 























让 我 们 可 以 把 lorem ipsum 字符 (或 “ 乱 数 假 文 ") 替换 成 真正 的 内 容 。 接 下 来 看 








主页 模式 的 范例 ， 在 一 番 研 究 之 后 ， 我 们 会 发 现 雪山 广告 图 有 这 样 一 个 图 片 标签 : 


<!-- 00-homepage.mustache - 


{{> templates- 


homepage }} 








-> 


正如 你 所 见 ，Pattern Lab 使 用 Mustache 格式 的 文件 ，Mustache 是 一 种 基本 的 模板 语言 ， 它 
支持 使 用 变量 、 ee ee es 


中 ， 








我 们 只 需 


<!-- 00-homepage.json --> 


{ 


"title": "Home Page", 


"bodyClass": 
"hero": [ 
{ 
"img mh : € 


"home", 


"landscape-16x9": { 


"SRC 
"alt": "Mountains" 
} 
}, 
"headline": { 
"medium": 
} 
} 
]， 


i 
} 


有 了 数据 填充 的 视 
标题 和 一 个 CSS 类 名 ， 接 下 来 是 广告 图 区 域 和 宣传 文案 ， 然 后 是 最 新 的 帖子 。 


JSON (http:Wwww.json.org) 


latest-posts": [ 





图 ， 我 们 的 页 














导入 主页 模板 ， 无 需 其 他 任何 操作 。 ”页面 文 件 ” 的 作用 就 在 于 ， 它 可 以 
把 一 些 数据 和 模板 关联 在 一 起 ， 下 面 就 来 看 看 对 应 的 数据 文件 : 

















"../../images/sample/16x9-mountains.jpg", 


"Top 10 mountain ranges for hiking" 





下 就 有 了 一 个 很 好 的 轮廓 。 可 以 看 到 ， 数 据 文件 里 有 一 个 
































是 一 个 用 于 保存 数据 的 极 好 的 格式 。 其 中 用 双 引 号 ("") 包含 





字符 串 ， 用 方 括号 〈[]) 包含 数组 ， 用 花 括号 (人) 包含 对 象 。 我 们 可 以 依 此 创建 一 个 字 


符 唱 
本 日 





数组 ["like" ， 1 





this"]， 其 至 还 可 以 创建 对 象 数 组 ， 就 像 刚 才 的 数据 文件 例子 中 ， 文 件 


里 每 一 个 段落 都 是 一 个 对 象 数 组 ， 比 如 “hero”“touts” 等 。 


既然 现在 已 经 有 了 数据 ， 

















` 面 就 来 进一步 了 解 页 面 调用 的 第 一 个 模板 文件 ， 即 首页 模板 : 
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智能 文 从 
要 文件 名 。 于 是 ， 当 我 们 需要 引入 名 为 header 的 “有 机 体 ” 时 ， 我 们 不 用 关心 引入 文 位 
实际 路 径 _patterns/02-organisms/00-global/00-header.mustache， 只 需要 输入 {{> organisms- 
header }} 即 可 。 


<!-- 00-homepage.mustache --> 


<div class="page" id="page"> 
{{> organisms-header }} 
<div role="main"> 
{{# hero }} 
{{> molecules-block-hero }} 
{{/ hero}} 
<div class="g g-3up"> 
{{# touts}} 
<div class="gi"> 
{{> molecules-inset-block }} 
</div> 
{{/ touts}} 
</div><!--end 3up--> 
<hr /> 
<div class="l-two-col"> 
<div class="l-main"> 
<section class="section latest-posts"> 
<h2 class="section-title">Latest Posts</h2> 
<ul class="post-list"> 
{{# Latest-posts }} 
<li>{{> molecules-media-block }}</\i> 
{{/ latest-posts }} 
</ul> 
<a href="#" class="text-btn">View more posts</a> 
</section> 
</div><!--end .l-main--> 
<div class="l-sidebar"> 
{{> organisms-recent-tweets }} 
</div><!--end .l-sidebar--> 
</div><!--end .l-two-col--> 
</div><!--End role=main--> 
{{> organisms-footer }} 
</div> 


16.3 首页 模板 


首先 你 可 能 会 注意 到 ， 这 个 模板 并 不 是 以 template-homepage 命名 的 。Pattern Lab 采用 了 
解析 系统 ， 因 此 只 需要 输入 <type>-<name>， 无 需 传 递 具体 的 路 径 ， 甚 至 也 不 需 








{{# hero }} 
{{> molecules-block-hero }} 


{{/ hero}} 


的 


TT 





拉 取 organisms-header 之 后 ， 模 板 文 件 就 导入 了 广告 图 页 面 。 导 入 的 每 个 段落 都 可 以 用 
{{# }} 标签 包含 起 来 ， 表 示 数 据 上 下 文 的 改变 。 
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这 意味 着 ， 如 果 页 面 中 导入 了 名 为 block-hero 的 分 子 ， 那 么 它 会 使 用 hero 数据 对 象 来 加 
载 里 面 的 所 有 变量 。 


{ 
"img": { 
"Landscape-16x9": { 
"src": "../../images/sample/landscape-16x9-mountains.jpg", 
"alt": "Mountains" 
} 
]， 
"headline" : { 
"medium" : "Top 10 mountain ranges for hiking" 
} 
} 


现在 我 们 知道 使 用 的 是 哪些 数据 了 ， 下 一 步 来 看 看 Mustache 文件 block-hero: 


<div class="block block-hero"> 
<a href="{{ url }}" class="inner"> 
<div class="b-thumb"> 
{{> atoms-Landscape-16x9 }} 
</div> 
<div class="b-text"> 
<h2 class="headline">{{ headline.medium }}</h2> 
</div> 
</a> 
</div> 


16.4 首 变 量 


这 个 Mustache 文件 保存 了 我 们 的 首 变量 。 在 Mustache 语法 里 ， 变 量 就 是 包含 在 {人 }} 里 的 
词 。 你 可 能 留意 到 这 里 的 首 变 量 是 {{url}}， 它 在 我 们 数据 集 里 还 没有 一 个 关联 的 值 。 如 
果 想 要 指定 这 个 URL， 就 需要 给 数据 集 添加 一 个 关键 词 为 url 的 属性 ， 然 后 这 个 模板 就 会 
调用 赋 给 url 属性 的 值 。 











{ 
"url": "http://www.google.com", 
"img": { 
"landscape-16x9": { 
"src": "../../images/sample/16x9-mountains.jpg", 
"alt": "Mountains" 
} 
}， 
"headline" : { 
"medium" : "Top 10 mountain ranges for hiking" 
} 
} 





然而 我 们 并 没有 指定 值 ， 这 个 时 候 Pattern Lab 可 以 智能 地 调用 全 局 的 data.json 文件 里 定义 
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好 的 url 默认 值 。 











下 一 个 变量 是 {{ headline.medium }}， 这 确实 是 一 个 我 们 有 的 值 。 中 间 的 点 号 意思 是 在 
headline 对 象 里 找到 mediun 的 属性 名 ， 然 后 返回 它 的 值 : Top 10 mountain ranges for 
hiking。 


16.5 原子 


我 们 还 需要 解决 最 后 调用 的 模板 {{> atoms-Landscape-16x9 }}。 就 像 我 们 在 首页 模板 中 看 
到 的 ， 这 个 标签 导入 了 名 为 “landscape-16x9” 的 原子 ， 但 是 这 里 并 没有 改变 数据 的 上 下 
文 。 这 意味 着 这 个 负责 显示 广告 图 的 Mustache 文件 会 和 block-hero 使 用 完全 一 样 的 数据 ， 
不 过 这 也 不 算 什么 大 问题 ， 因 为 block-hero 模板 中 几乎 没有 多 个 img 属性 的 需求 。 因 此 ， 
可 以 使 用 和 block-hero 相同 的 数据 调用 模板 并 传 入 广告 图 。 



































<!-- 02-Landscape-16x9.mustache --> 
<img src="{{ img.16x9.src }}" alt="{{ img.16x9.alt }}" /> 


Pattern Lab 让 我 们 可 以 抽象 最 简单 的 标记 块 ， 这 个 图 片 标签 就 是 一 个 很 好 的 例子 。 这 个 模 
板 只 调用 了 图 片 源码 及 其 att 标签 ， 因 此 看 起 来 可 能 多 此 一 举 。 为 什么 不 直接 放 一 个 图 片 
标签 到 广告 图 板块 里 ， 就 像 那个 H2 标题 一 样 ? 话说 回来 ， 究 竟 把 模板 抽象 到 什么 程度 ， 
还 是 应 该 由 你 和 你 的 团队 来 决定 ， 不 过 所 有 图 片 标签 都 用 单一 的 模板 生成 是 很 有 意义 的 。 


想象 一 下 将 来 你 决定 给 所 有 的 图 片 标签 添加 一 个 CSS 类 名 或 者 data 属性 。 如 果 每 个 模板 
只 处 理 自己 的 图 片 标签 ， 那 就 需要 更 新 很 多 “分 子 "。 但 是 如 果 所 有 的 图 片 都 用 一 个 单 
独 的 模板 来 处 理 ， 那 么 只 需 更 新 一 处 ，Pattern Lab 就 会 帮 你 更 新 其 他 任何 用 到 这 个 原子 的 
地 方 。 


16.6 发 挥 原子 的 作用 


现在 ， 我 们 已 经 见识 了 在 首页 显示 广告 图 的 方法 ， 还 可 以 采取 同样 的 方法 分 解 页 面 上 的 每 
一 个 UI 元 素 。 这 种 方法 的 强大 之 处 在 于 ， 在 持续 构建 的 过 程 中 ， 你 很 快 就 会 发 现 可 以 重 
复 使 用 之 前 建 好 的 片段 。 


如 今 ， 当 我 们 着 手 构建 网 站 的 页 面 时 ， 面 对 的 已 经 不 再 是 一 张 白 纸 ， 以 及 各 种 独特 标记 和 
样式 的 组 合 。 我 们 能 够 通过 系统 已 有 的 原子 、 分 子 、 有 机 体 和 模板 创建 一 个 完整 的 页 面 。 
由 于 整个 网 站 共享 相同 的 代码 ， 如 果 要 调整 “发 布 日 期 ”的 行 高 ， 那 么 不 必 挨 个 修改 每 个 
页 面 各 自 的 日 期 数据 条 目 ， 只 需 更 新 一 个 原子 ， 这 个 改变 就 会 自动 应 用 到 整个 系统 中 。 


如 今 ，Pattern Lab 文档 网 站 成 为 了 由 构建 网 站 的 各 个 单元 有 机 结合 而 成 的 动态 系统 。 它 对 
品牌 颜色 、 字 体 、 商 标 规格 其 至 动画 都 进行 了 分 类 。 因 此 ，Pattern Lab 成 为 了 最 完整 而 高 
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效 的 网 站 文档 记录 方式 之 一 。 它 不 仅 是 一 个 极 好 的 开发 平台 ， 也 起 到 了 团队 成 员 之 间 进 行 
沟通 的 通用 语言 的 作用 。 


不 要 觉得 前 端 开发 是 在 原 地 绕 圈 。 假 如 只 是 构建 不 同 的 网 页 ， 工 作 只 会 随 着 时 间 推 移 变 得 
越 来 越 难 。 但 是 如 果 专 注 于 运用 类 似 Pattern Lab 的 工具 构建 系统 ， 那 么 实际 上 工作 会 随 着 
时 间 的 推移 变 得 越 来 越 简 单 。 请 不 要 担心 这 样 会 让 我 们 失业 ! 一 旦 从 枯燥 的 网 站 独立 页 面 
开发 工作 中 解放 出 来 ， 就 能 有 更 多 的 心思 来 研究 如 何 完善 我 们 的 系统 。 这 也 正 是 我 要 介绍 
JSON 模式 的 原因 。 第 17 章 不 会 再 介绍 一 般 类 型 的 示例 ， 而 会 以 Red Hat 网 站 为 例 来 具体 
说 明 ，JSON 模式 是 如 何 将 Red Hat 从 类 似 Pattern Lab 的 系统 转变 为 完全 集成 的 设计 系统 
的 。 这 个 系统 不 仅 可 以 生成 样式 规范 ， 同 时 也 是 内 容 编辑 系统 的 基础 ， 而 且 还 是 网 站 的 主 
要 演 染 引擎 。 
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第 17 章 


Red Hat 文 档 





回顾 为 Red Hat 网 站 开发 新 的 设计 系统 的 长 达 一 年 的 过 程 后 ， 我 意识 到 整个 项 目 是 从 一 个 
文档 需求 开始 的 ， 并 在 此 基础 上 发 展 壮 大 。 管 理 层 最 初 的 需求 是 为 网 站 最 通用 的 模块 开发 
一 个 样式 文档 ， 并 在 Red Hat 的 其 他 站 点 之 间 复 用 。 项 目 开始 时 只 有 一 些 Sass 文件 片段 和 
Hologram 样式 文档 ， 但 它 所 孚 育 的 却 远 不 止 这 些 。 


17.1 阶段 1: 静态 的 样式 文档 


就 像 第 15 章 中 提 到 的 ，Hologram 是 一 种 文档 工具 ， 它 在 代码 中 寻找 有 特殊 标记 的 文档 注 
释 块 ， 并 把 这 些 注释 块 转换 成 样式 文档 。 从 Nicole Sullivan 那里 了 解 到 Hologram 以 后 ， 我 
感觉 它 应 该 是 为 正在 开发 的 组 件 编写 文档 的 完美 工具 。 


Hologram 使 用 起 来 很 方便 快捷 。 每 一 个 组 件 和 布局 都 有 自己 的 Sass 文件 片段 ， 因 此 我 们 
将 文档 块 写 在 文件 的 最 开头 。 文 档 块 记录 了 很 多 东西 ， 从 组 件 的 设计 意图 到 它 的 功能 和 局 
限 性 ， 其 至 还 包括 示例 的 HTML 代码 。 示 例 的 HIML 代码 可 以 帮助 我 们 迅速 了 解 组 件 的 
功能 ， 而 不 用 触发 CMS 系统 ， 从 而 使 得 原型 开发 、 跨 浏览 器 测试 和 视觉 还 原 测试 更 简单 。 





T 


















































有 了 组 件 库 和 布局 库 之 后 ， 我 们 还 花 了 很 多 时 间 来 写 入 门 文档 。 该 文档 不 仅 包 括 如 何 设 
置 样式 文档 ， 还 包括 如 何 使 用 、 如 何 贡 献 新 的 内 容 ， 以 及 如 何 发 布 新 的 版 本 。 在 这 方面 ， 
Hologram 是 个 很 不 错 的 工具 ， 因 为 我 们 可 以 简单 地 为 文档 创建 一 个 文件 夹 ， 然 后 在 其 中 创 
建 Markdown 文件 ，Hologram 就 会 基于 页 面 的 类 别 将 这 些 Markdown 文件 的 内 容 写 入 样式 
文档 里 。 
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起 初 一 切 都 进展 得 很 顺利 ， 直 到 我 们 突然 记 起 最 初 的 目标 是 创建 一 个 样式 文档 ， 其 中 说 明 























其 中 创建 Markdown 文件 ， 将 Markdown 文件 连接 到 模板 中 使 用 的 组 件 和 布局 





块 ， 以 及 特色 活动 区 块 中 有 两 个 活动 和 有 三 个 活动 时 代码 的 差异 。 


如 何 组 合 代码 来 创建 出 各 种 常用 的 模板 。 这 并 不 困难 ， 只 需要 创建 一 个 模板 文件 夹 ， 在 


中 即 可 。 





Markdown 文件 包括 了 对 栅 格 、 对 齐 、 主 题 值 等 的 描述 。 创 建 完成 后 ， 就 可 以 将 标记 复制 
到 Markdown 文件 ， 用 它 来 说 明 诸如 品牌 logo 如 何 显示 、 如 何 用 HTML 标记 实现 视频 区 


问题 是 ， 每 次 将 HTML 标记 从 一 个 地 方 复制 到 另 一 个 地 方 ， 标 记 被 改变 的 概率 就 会 无 限 
增加 。 我 们 很 快 就 发 现 这 种 方式 有 多 么 难以 维护 ， 因 此 很 快 开始 寻找 新 的 解决 方案 : 对 
HTML 标记 片段 使 用 单一 源 ， 并 按 需 重 用 。 不 幸 的 是 ，Hologram 本 身 不 支持 任何 模板 语 
言 。2014 年 10 月 ， 我 在 这 个 项 目的 Github 主页 上 提出 了 一 个 问题 ,“ 将 html_example 处 





























Ne 





issues/159)， 如 今 仍 待 解决 。 
我 
处 


pe 
































| 























<!-- cta.docs.md --> 


hologram: true 
title: CTA Component 
category: Component - CTA 


- A "Call-to-Action" component contains one or more CTA buttons. 
## Primary Button 


‘~ html_example 
{% include "cta.twig" with {'type': 'primary'} %} 


## Secondary Button 


“html_example 
{% include "cta.twig" with {'type': 'secondary} %} 


“html_example 

<!-- cta.twig --> 

<div class="rh-cta" > 

<a class="rh-cta-link" data-rh-cta-type="{{type}}" href="#"> 
CTA Button 

</a> 

</div> 


里 为 ruby 的 视图 模板 ， 从 而 可 以 重用 模板 的 继承 关系 ”(https://github.com/trulia/hologram/ 





门 提 出 的 解决 方案 是 ， 在 文档 文件 传递 到 Hologram 之 前 ， 就 使 用 Twig 模板 引擎 对 其 进行 
里。 我 很 惊讶 地 发 现 ，Twig 处 理 Markdown 文件 完全 没有 问题 。 下 面 是 文档 的 简单 示例 : 
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从 上 述 单个 文档 文件 中 可 以 看 出 ， 我 们 可 以 借助 Twig 的 inctude 函数 ， 使 用 不 同 的 参数 ， 





处 理 : 


<!-- cta.docs.md - 


hologram: true 


在 文件 不 同 的 地 方 输出 同样 的 CTA 标记 。 结 果 文件 可 以 直接 传递 给 Hologram 进行 常规 


be 


title: CTA Component 
category: Component - CTA 


- A "Call-to-Action" component contains one or more CTA buttons. 


## Primary Button 


‘html_example 


<div class="rh-cta" > 
<a class="rh-cta-link" data-rh-cta-type="primary" href="#"> 


CTA Button 
</a> 
</div> 


## Secondary Button 


‘html_example 


<div class="rh-cta" > 
<a class="rh-cta-link" data-rh-cta-type="secondary" href="#"> 


CTA Button 
</a> 
</div> 


如 果 要 修改 CTA 标记 


， 只 需 更 新 单个 Twig 模板 文件 ， 整 个 系统 就 可 以 使 用 新 的 标记 了 。 





17.2 ”阶段 2: 重 写 Pattern Lab 
上 文 提 到 的 方法 很 适合 为 单个 组 件 写 文档 。 但 我 们 也 逐渐 需要 为 布局 写 文档 了 ， 比 如 卡片 


布局 。 卡 片 布 局 很 简 六 








和 ， 你 可 以 将 多 个 组 件 放 在 一 个 有 外 边界 的 盒子 中 ， 并 在 其 中 应 用 主 














题 和 背景 。 但 是 ， 如 果 使 用 Twig 导入 卡片 布局 标记 ， 怎 样 才能 知道 卡片 中 使 用 的 是 哪个 
组 件 呢 ?我 们 可 以 创建 一 堆 卡 片 布局 ， 每 个 卡片 布局 引用 不 同 的 组 件 ， 但 这 不 是 又 在 复制 


标记 代码 吗 ? 











实际 上 Twig 支持 对 inctude 语句 传递 参数 ， 于 是 有 了 下 列 解决 方案 : 


{% set template = 'cta.twig' %} 


{% include template %} 
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这 正 是 我 们 需要 的 能 力 ， 使 用 它 可 以 创建 各 种 卡片 布局 ， 每 个 布局 的 设置 和 内 容 都 不 一 样 。 
<!-- card.docs.md --> 


hologram: true 
title: Card Layout 
category: Layout - Card 


{% 

set data = { 
"theme": "dark", 
"components": [ 


{ 
"template": "image_embed.twig", 
"src": "my-image.jpg" 
}; 
€ 
"template": "cta.twig", 
"type": "primary" 
} 
] 
} 
%} 


{% include card.twig with data %} 
<!-- end card.docs.md --> 
<!-- Card.twig --> 
<div class="rh-card data-rh-theme="{{theme}}"> 
{% for component in components %} 
{% include component.template with component only %} 
{% endfor %} 


</div> 


<!-- end card.twig --> 





上 述 代 码 做 了 一 些 稍微 复杂 点 的 工作 ， 这 里 把 它 分 解 一 下 ， 因 为 从 卡片 发 展 到 组 、 区 块 其 
至 更 复杂 的 结构 的 过 程 是 整个 系统 构建 的 基础 。 








{% set 


data = { 
"theme": "dark", 
"components": [ 
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我 们 的 第 一 项 任务 是 创建 一 个 描述 如 何 构建 系统 的 数据 集 。 正 如 所 见 ， 我 们 写 了 一 些 包含 
两 个 属性 的 代码 ， 分 别 是 theme 和 components。theme 只 是 一 个 字符 串 ， 而 components 是 
包含 两 个 对 象 的 数组 ， 分 别 是 模板 属性 和 其 他 一 些 与 模板 相关 的 属性 。 也 许 你 认为 这 看 起 
来 有 点 像 JSON， 没 错 。 虽 然 我 们 一 开始 使 用 Twig 数据 对 象 ， 然 后 逐渐 转换 为 以 JSON 数 
据 表 示 的 工作 流 ， 但 是 二 者 的 逻辑 是 一 样 的 。 


下 一 步 需要 使 用 上 文 设 置 的 数据 来 导入 卡片 模板 : 











{% include card.twig with data %} 


最 后 是 卡片 的 Twig 模板 文件 ， 看 一 看 它 是 如 何 处 理 我 们 传 入 的 数据 的 : 





<div class="rh-card data-rh-theme="{{theme}}"> 
{% for component in components %} 
{% include component.template with component only %} 


{% endfor %} 


</div> 








首先 遇 到 的 是 {{theme}} 变量 ， 这 一 步 很 简单 。 我 们 从 theme 属性 获取 了 dark 值 ， 并 赋值 
给 data-rh-theme 属性 ， 过 程 跟 CTA Twig 文件 中 的 一 样 。 





























第 二 个 Twig 片段 稍微 复杂 一 些 。{% for component in components %} 表示 对 数组 
components 中 的 每 一 个 组 件 〈 即 component) 进行 如 下 操作 : 引入 从 每 个 数组 的 template 
属性 中 找到 的 模板 ， 并 将 整个 数组 作为 新 的 数据 上 下 文 传递 到 该 模板 中 。 因 此 在 如 下 的 
代码 中 ， 我 们 首先 引入 image_embed.twig 文件 并 传人 图 片 地 址 ， 然 后 引入 cta.twig 并 设置 
type 的 属性 为 primary。 














{ 
"template": "image_embed.twig", 
"src": "my-image.jpg" 

入 

{ 


"template": "cta.twig", 
"type": "primary" 








如 果 这 些 对 你 来 说 很 熟悉 ， 那 也 许 是 因为 你 刚 读 过 前 面 的 章节 ， 其 中 介绍 了 如 何 使 用 
Pattern Lab 为 布局 引入 的 每 一 个 原子 组 件 和 模块 传递 数据 上 下 文 。 如 有 果 你 猜想 我 们 是 不 
是 …… 没 错 ， 最 终 我 们 创建 了 自己 的 Pattern Lab。 


























很 多 同事 在 意识 到 我 做 了 什么 时 会 笑 我 ， 问 我 为 什么 不 一 开始 就 使 用 Pattern Lab。 我 当时 
的 回答 也 很 简单 : 走 到 这 一 步 是 很 自然 的 。 我 们 从 一 些 基 本 功能 出 发 ， 随 着 需求 的 变更 不 
停 地 添加 新 功能 ， 最 终 和 Pattern Lab 就 很 像 了 。 不 过 最 后 我 们 发 现 ， 还 是 自己 开发 的 系统 
更 符合 我 们 的 需求 。 
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Hologram 不 仪 提 供 了 存储 模式 库 的 地 方 ， 还 可 以 快速 创建 样式 文档 ， 并 为 安装 、 最 佳 实践 
和 部 署 指引 等 建立 文档 。 我 们 自己 的 系统 和 Pattern Lab 之 间 还 有 一 个 很 大 的 区 别 ， 那 就 是 
我 们 通过 数据 来 决定 引入 的 模板 ， 而 不 像 Pattern Lab 一 样 把 模板 信息 硬 编码 在 布局 或 模块 
组 合生 成 的 有 机 体 中 。 








这 意味 着 我 们 可 以 对 任意 内 容重 用 布局 ， 而 无 需 为 每 一 个 组 合 创建 新 的 布局 。 另 外 还 有 一 
个 需要 注意 的 重点 : 一 旦 演 染 流程 开始 ， 我 们 对 数据 以 外 的 标记 是 没有 控制 权 的 ， 我 们 没 
办 法 为 某 个 组 件 的 特殊 情况 改变 布局 文件 的 资源 顺序 ， 或 为 另外 一 个 组 件 添 加 额外 的 容器 
div。 这 些 限制 最 终 会 使 我 们 的 系统 变 得 健壮 和 强大 。 但 在 达到 这 个 目标 之 前 ， 我 们 需要 放 
下 一 些 重担 。 


17.3 阶段 3: 分 拆 模式 库 和 样式 文档 


随 着 模式 库 和 样式 文档 不 断 扩 大 ， 让 我 头疼 的 一 个 地 方 是 ， 因 为 它们 使 用 同一 个 Git 仓库 ， 
所 以 我 们 不 断 推送 对 样式 文档 的 小 调整 和 大 改动 ， 然 而 这 些 改动 对 模式 库 没 有 丝毫 影响 。 
我 们 已 经 对 每 次 迭代 都 制订 了 发 布 计划 ， 而 每 次 改动 后 都 会 推送 一 个 预 发 布 的 标签 。 这 造 
成 了 不 少 困 扰 ， 因 为 在 用 新 的 预 发 布 标签 去 麻烦 后 端 开发 人 员 之 前 ， 我 们 需要 确认 新 的 代 
码 是 否 已 经 对 模板 、 样 式 或 JavaScript 生效 。 我 们 对 Git 仓库 做 了 大 量 的 改动 ， 而 最 终 能 
够 看 到 的 效果 实际 上 只 是 样式 文档 的 几 个 页 面 ， 这 也 让 人 感觉 有 点 混乱 。 

我 们 的 解决 方案 是 将 模式 库 和 样式 文档 分 拆 到 不 同 的 Git 仓库 中 。 这 样 做 带 来 的 好 处 比 我 
们 想象 的 还 要 多 。 


最 直接 的 好 处 就 是 ， 我 们 可 以 全 天 候 地 把 对 样式 文档 的 修改 推送 到 自己 的 Git 仓库 ， 而 不 
用 担心 影响 生产 环境 下 的 服务 器 。 现 在 模式 库 收 到 的 拉 取 请 求 少 多 了 ， 我 们 可 以 有 更 多 精 
力 来 关注 这 些 改动 如 何 影响 生产 环境 和 样式 文档 ， 二 者 都 是 通过 Bower 加 载 模式 库 的 。 









































第 二 个 好 处 是 ， 现 在 我 们 的 生产 环境 和 样式 文档 对 模式 库 的 依赖 是 平等 的 。 当 样式 文档 中 
创建 了 一 个 新 的 内 容 块 设计 时 ， 我 们 只 能 通过 JSON 数组 来 编辑 HTML 标记 。 我 们 没有 办 
法 为 某 个 一 次 性 的 特殊 情况 修改 标记 或 添加 自 定义 的 CSS。 这 意味 着 ， 对 于 样式 文档 中 创 
建 的 所 有 内 容 ， 我 们 都 有 自信 在 不 修改 模板 的 情况 下 使 其 在 生产 环境 中 重 现 。 


当前 生产 环境 中 使 用 的 是 CSS 和 JavaScript， 但 它 有 自己 的 基于 PHP 的 模板 泻 染 引擎 来 处 
里 较为 繁杂 的 工作 。 我 们 能 够 保证 把 每 个 组 件 和 模板 都 原样 复制 到 PHP 里 面 ， 但 是 这 种 方 
式 非 常 依赖 人 工 操作 ， 而 且 对 模式 库 的 每 一 次 改动 都 必须 复制 到 生产 环境 中 。 









































Ne 











这 个 问题 其 实 很 常见 ， 大 部 分 Pattern Lab 用 户 可 以 使 用 内 置 的 Mustache 模板 创建 各 种 设 
计 、 模 板 和 页 面 ， 但 还 需要 将 编译 后 的 HTML 标记 交 给 后 端 开发 工程 师 来 实现 后 端 模 板 。 
但 这 并 不 代表 他 们 喜欢 这 种 方式 ! 我 敢 肯 定 ， 他 们 希望 只 修改 模式 库 里 的 原子 组 件 ，CMS 
(内 容 管理 系统 ) 就 能 立即 根据 改动 重新 泻 染 页 面 。 
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幸运 的 是 ， 我 们 已 经 开始 使 用 Twig，Twig 本 来 就 是 一 种 PHP 模板 。 而 且 已 经 有 一 些 开发 
者 正在 努力 创建 模式 库 和 CMS 演 染 引擎 之 间 的 链接 。 


人 En 和 
17.4 阶段 4: 创建 统一 的 演 染 引擎 
Drupal (一 个 基于 PHP 的 内 容 管理 系统 ) 的 前 端 开发 者 面临 的 最 大 麻烦 之 一 是 ， 无 法 在 不 
依赖 Dmupal 自身 的 情况 下 重 写 Drupal 日 益 复杂 的 演 染 流程 ，Drupal 就 是 通过 该 流程 创建 
HTML 标记 的 .我 们 要 么 被 迫 编写 静态 的 HTML 标记 ， 在 最 终 执行 时 却 被 和 忽略， 要么 直 
接 使 用 Drupal 创建 的 HTML 标记 ， 并 在 开始 写 样式 前 就 要 先 在 CMS 中 创建 内 容 。 






































然而 把 模式 库 和 样式 文档 分 拆 之 后 ， 我 们 发 现 自己 其 实 创建 了 一 个 全 新 的 基于 Twig 的 这 
染 引 区 ,该 引擎 可 以 用 于 Drupal 和 我 们 自己 的 样式 文档 。 向 Twig 泻 染 函数 传递 同样 的 
JSON 数据 集 和 标记 即 服务 (或 者 设计 API) ， 会 一 直 返 回 同 样 的 结果 。 现 在 ， 我 们 的 模 
式 库 可 以 安装 到 任何 支持 编译 Twig 的 系统 中 了 。 如 果 JSON 数据 的 收集 和 格式 化 是 正常 
的 ， 那 么 泻 染 出 来 的 HTML 也 是 完全 一 致 的 ， 无 论 JSON 数据 是 通过 静态 文件 还 是 复杂 的 
CMS 系统 传递 的 。 


当然 ， 我 们 的 挑战 在 于 ， 要 知道 正确 格式 化 的 数据 是 什么 样 的 。 每 个 模板 接受 哪些 属性 ? 
这 些 属性 的 类 型 是 字符 串 、 数 字 还 是 布尔 值 ? 哪些 属性 是 必需 的 ? 有 没有 属性 对 接受 的 参 
数值 有 限制 ? 如何 确 保 传递 给 Twig 函数 的 参数 是 有 效 的 ， 并 且 能 够 生成 正确 的 HIML ? 
对 这 些 问 题 的 尝试 解答 将 我 们 引 至 最 伟大 的 发 现 之 一 :JSON 模式 。 












































JSON 模 式 


简 而 言 之 ，JSON 模式 描述 了 一 个 数据 集 。 具 体 而 言 ， 在 我 们 的 模式 库 中 ，JSON 模式 描述 
了 正确 地 浑 染 一 个 模板 所 需要 的 数据 。 它 列 出 模板 的 所 有 变量 、 哪 些 变量 是 必需 的 、 变 量 
的 数据 类 型 ， 以 及 对 变量 的 值 的 所 有 限制 。 

如 果 我 们 的 卡片 布局 有 一 个 theme 变量 ， 那 么 对 应 的 JSON 模式 会 提示 我 们 theme 变量 是 


必需 的 ， 而 且 取 值 只 能 是 dark 或 Light 这 两 个 字符 串 之 一 。 如 果 我 们 试图 忽略 theme， 或 
者 给 模板 递 字 符 串 gray， 那 么 卡片 布局 就 会 返回 验证 错误 提示 。 














我 们 可 以 使 用 JSON 模式 提示 卡片 布局 可 以 包括 一 系列 不 同 的 组 件 ， 而 且 还 可 以 通过 它 来 
验证 用 于 泻 染 某 个 页 面 区 域 的 复杂 JSON 数组 ， 所 有 的 验证 只 需要 运行 一 次 。 下 面 的 代码 
可 能 包含 一 个 有 效 的 卡片 布局 ， 但 是 其 中 的 CTA 组 件 却 是 无 效 的 ， 因 为 其 中 type 的 值 不 


能 是 tertiary : 
































{ 
"template": "band.twig", 
"theme": "dark", 
"components": [ 
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{ 
"template": "cta.twig", 
"type": "tertiary" 


] 


JSON 模式 允许 我 们 通过 引用 来 描述 可 以 放 到 卡片 布局 、 组 布局 和 特定 内 容 块 里 面 的 CTA 
组 件 ， 因 此 无 需 复制 JSON 模式 文件 。 而 且 和 Twig 一 样 ， 我 们 只 使 用 单一 的 规范 的 数据 
源 。 因 此 ， 通 过 给 不 同 的 组 件 (小 到 按钮 、 大 到 布局 ) 创建 JSON 模式 ， 我 们 得 到 了 非常 
复杂 且 全 面 的 JSON 模式 文件 ， 通 过 它 就 能 够 验证 所 有 想 要 泻 染 的 内 容 块 。 


有 了 这 些 JSON 模式 作为 武装 ， 任 何 模 板 所 需 的 数据 ， 开 发 者 一 看 便 知 ， 而 且 他 们 也 可 以 
在 数据 发 送 到 共享 Twig 模板 引擎 之 前 ， 验 证 自己 收集 到 的 数据 的 有 效 性 。 这 是 对 旧版 本 
系统 的 一 个 重大 提升 ， 因 为 再 也 不 用 小 心 惨 翼 地 修改 输出 的 HTML 标记 ， 直 到 它 完 全 符合 
样式 文档 了 。 他 们 可 以 自信 地 说 ， 只 要 数据 是 有 效 的 ， 泻 染 引 擎 就 会 输出 正确 的 HTML 标 
记 。 不 幸 的 是 ， 这 种 方案 还 有 一 个 问题 。 


开发 者 仍然 肩负 重担 ， 他 们 要 在 CMS 中 为 页 面 里 的 标题 、 图 片 和 文本 段落 创建 儿 十 个 所 
需 的 输入 框 。 就 算 所 有 的 输入 框 都 创建 完成 ， 他 们 还 要 在 泻 染 之 前 吃力 地 将 这 些 标题 、 攻 
片 和 文本 段落 映射 到 JSON 数组 。 他 们 也 无 法 重用 这 些 输入 框 去 收集 每 个 模板 文件 的 数据 。 
每 当 需 要 收集 文本 、 链 接 和 CTA 按钮 所 需 的 数据 时 ， 他 们 都 要 在 CMS 系统 中 创建 更 多 的 
输入 框 ， 而 且 相 应 地 也 需要 更 多 的 数据 库 条 目 。 













































































但 我 们 还 是 很 幸运 的 ， 因 为 JSON 模式 还 有 几 招 没有 使 用 。 


17.5 ”阶段 5: 自动 创建 新 模式 


虽然 我 不 是 一 名 经 验 丰 富 的 PHP 后 端 开 发 人 员 ， 但 我 和 他 们 一 样 痛恨 重复 的 工作 。 我 可 以 
真切 地 感受 到 这 些 开 发 人 员 的 痛苦 ， 仅 仅 为 了 匹配 写 好 的 模式 ， 他 们 就 要 重复 地 配置 几 十 
个 输入 框 。 我 不 禁 思 注 ， 如 果 我 们 能 够 在 完全 不 需要 后 端 介入 的 情况 下 ， 就 把 在 JSON 模 
式 、 模 板 和 样式 上 所 做 的 工作 程序 化 引入 到 CMS 系统 中 ， 那 我 们 的 系统 该 有 多 强大 | 


如 果 我 们 不 需要 等 待 下 一 个 为 期 三 周 的 迭代 再 开发 资源 来 实现 新 的 模板 ， 如 果 我 们 能 够 从 
根源 上 避免 “翻译 损失 ”的 问题 ( 即 开发 者 需要 先 对 模式 功能 作假 设 ， 之 后 需要 一 个 迭代 
来 解决 出 现 的 一 大 堆 问 题 )， 那 吕 不 是 很 好 吗 ? 




















Jeremy Dorn 的 JSON 编辑 器 (http://jeremydorn.com/json-editor/) 可 以 根据 JSON 模式 的 属 
性 生成 HTML 表单 ， 并 在 更 新 表单 域 时 返回 JSON 数据 。 我 们 在 模式 库 中 使 用 这 个 工具 来 
操作 JSON 模式 、 模 板 和 样式 ， 通 过 实时 视觉 反馈 来 观察 属性 改变 对 泻 染 结果 的 影响 。 由 
于 JSON 编辑 器 有 将 JSON 模式 转变 成 表单 的 功能 ， 而 且 在 这 方面 我 们 取得 了 很 大 的 成 功 ， 
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我 们 相信 这 个 方案 同样 也 可 以 成 功 地 用 于 任何 使 用 我 们 设计 系统 的 平台 ， 包 括 Drupal 和 
WordPress。 











当 开 发 人 员 有 机 会 为 Drupal 创建 自动 化 的 JSON 模式 引入 流程 时 ， 我 们 对 JSON 模式 能 

的 信心 就 得 到 了 回报 。 借 助 于 JSON 模式 ， 短 短 几 周 内 ， 我 们 有 了 一 个 将 组 件 和 布局 转换 
为 Drupal 实体 的 自动 化 系统 。 现 在 ， 我 们 就 可 以 为 CTA 组 件 创 建 单独 的 Drupal 实体 了 ， 
并 在 每 次 包含 组 件 时 引用 Drupal 实体 及 其 对 应 的 数据 库 字 段 。 


创建 模式 
我 们 也 想 把 Red Hat 品牌 下 已 经 创建 的 很 多 其 他 模式 利用 起 来 ， 它 们 都 是 一 些 把 不 同 布局 
和 组 件 组 合 在 一 起 的 方法 。 一 个 模式 指定 了 使 用 的 栅 格 布局 、 组 件 和 某 些 属性 的 值 。 如 果 
需要 创建 一 个 品牌 图 标 墙 ， 包 括 五 张 为 一 行 的 内 和 嵌 图 片 ， 我 们 可 以 简单 地 使 用 一 个 模式 而 
不 用 手动 设置 。 






































事实 证 明 ， 页 面 模式 也 可 以 用 JSON 模式 来 描述 。 每 一 个 内 容 块 模式 都 描述 了 这 个 模式 .可 
以 接受 的 数据 ， 这 看 起 来 与 内 容 块 的 JSON 模式 很 相似 。 但 是 它 比 JSON 模式 更 严格 ， 并 
且 不 一 定 会 提供 所 有 的 背景 、 布 局 和 组 件 的 所 有 可 选项 。 


借助 于 简单 的 JSON 模式 数据 集 的 力量 ， 我 们 不 仅 能 够 设计 组 件 的 原型 ， 还 可 以 定义 用 于 
泻 染 原型 的 模板 ， 其 至 定义 模板 所 需 的 数据 模型 ， 以 及 CMS 中 用 于 搜集 数据 的 UI 1 

















我 们 当初 决定 采用 JSON 模式 ， 它 的 功能 强大 ， 但 也 有 各 种 限制 ， 而 这 一 切 让 我 们 建立 起 
如 今 的 系统 。 这 个 系统 开始 时 仅仅 是 一 些 设计 元 素 和 一 部 分 希望 用 于 实现 的 HTML 标记 ， 
最 终 变 成 了 一 个 从 原型 设计 到 页 面 浑 当 的 高 效 流 水 线 ， 并 省 去 了 很 大 一 部 分 重复 的 工作 。 
它 使 我 们 的 前 端 工作 能 够 完整 地 定义 CMS 中 的 整个 流程 ， 包 括 数据 收集 、 数 据 存储 、 页 
面 浑 染 和 样式 内 容 等 。 
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在 这 个 项 目的 整个 过 程 中 ， 我 所 学 到 的 关于 前 端 架构 的 最 重要 的 知识 之 一 就 是 ， 对 于 任何 
优秀 的 架构 而 言 ， 只 要 未 到 最 后 一 刻 ， 你 的 工作 就 不 会 结束 。 这 个 项 目 从 非常 简单 的 结构 
开始 ， 创 建 出 了 一 个 满足 当时 需求 的 架构 。 但 是 随 着 时 间 推 移 ， 我 们 的 需求 发 生 了 变化 ， 
项 目 也 随 之 变 得 更 复杂 ， 而 一 个 成 功 的 案例 会 给 其 他 领域 提供 有 用 的 参考 。 





有 时 候 回 顾 整 个 过 程 ， 想 想 花 了 那么 长 时 间 才 达到 目前 的 状态 ， 不 由 得 心里 会 问 :“ 为 什 
么 不 在 一 开始 的 时 候 就 这 么 做 呢 ? 为 什么 我 们 要 经 历 那么 多 友 代 ， 而 不 在 第 一 天 就 把 最 终 
产品 的 架构 定义 好 呢 ? 难道 这 说 明 我 们 失败 了 ， 或 者 我 们 的 工作 毫 无 价值 ? ”不 是 这 样 
的 ， 这 一 点 我 非常 肯定 。 


随 着 对 前 端 架 构 的 理解 越 来 越 深入 ， 我 可 以 肯定 的 是 ， 从 项 目 开 始 到 现在 所 达到 的 高 度 ， 
所 需 的 时 间 会 越 来 越 得 ， 而 且 所 经 历 的 迭代 也 会 越 来 越 少 〈 虽 然 迭 代 是 流程 中 必 不 可 少 的 
一 部 分 )。 作 为 前 端 架 构 师 ， 我 们 的 职责 是 认 请 目前 的 优势 和 劣势 ， 并 预测 可 能 出 现 的 机 
遇 和 问题 。 经 历 过 后 方 能 预测 ， 曾 经 低估 才能 理解 。 我 们 所 能 展示 的 最 大 能 力 就 是 对 前 端 
开发 过 程 的 深刻 理解 。 

















因此 ， 如 果 这 是 你 第 一 次 制定 架构 计划 ， 请 记 住 你 将 要 迭代 很 多 次 ! 不 要 把 你 所 有 的 希望 
寄托 于 一 个 单独 的 解决 方案 、 框 架 或 者 平台 ， 除 非 它 一 次 又 一 次 地 被 证 明 是 有 效 的 。 如 果 
你 从 事 这 个 工作 很 长 时 间 了 ， 那 么 你 已 经 知道 ， 我 们 仍然 需要 不 断 地 迭代 和 尝试 新 的 事 
物 。 如 今 我 们 不 会 再 见 到 使 用 各 种 表格 布局 和 静态 设计 稿 搭建 出 来 的 新 网 站 ， 因 此 永远 不 
要 以 为 你 在 过 去 的 几 个 项 目 中 用 过 的 工具 仍旧 是 完成 当前 工作 的 最 佳 选 择 。 
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但 最 重要 的 是 ， 如 果 你 也 想 要 成 为 一 名 前 端 架构 师 ， 请 记 住 你 永远 不 是 在 孤军 作战 。 业 界 
有 很 多 人 投身 于 前 端 架 构 的 艺术 ， 不 管 他们 的 头衔 如 何 。 


不 要 害怕 寻求 别人 的 帮助 ， 不 要 害怕 分 享 你 的 知识 ， 也 不 要 害怕 站 在 台 上 鼓励 他 人 从 事 这 
个 领域 。 最 后 ， 不 管 你 做 什么 ， 在 任何 情况 下 都 不 要 害怕 把 它们 全 部 写 到 书 上 。 
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封面 介绍 
本 书 封面 上 的 动物 是 粉 头 虫 营 (学 名 Cardellina vericolor) 。 它 是 一 种 小 型 和 次 形 目 岛 ， 生 活 
在 高 海拔 地 区 (1800~3500 米 ) ， 主 要 分 布 于 危地马拉 和 墨西哥 南部 。 





成 年 粉 头 虫 营 平 均 长 约 12.7 厘米 ， 重 约 10 克 。 它 的 鸣 唱 声 接近 “ 嗽 嗽 ”和 “ 吡 吡 ” 的 金 
属 声 。 虽 然 只 有 雄性 会 鸣 喝 ， 但 两 性 都 会 通过 一 种 更 低 的 咽 嗽 声 来 与 配偶 保持 联系 。 

除非 共同 喂养 小 鸟 ， 否 则 很 少 能 看 到 两 只 粉 头 虫 营 待 在 一 起 。 它 们 喜欢 栖息 于 温带 雨林 里 的 
侈 矮 茂密 的 灌木 人 中， 但 是 这 种 类 型 的 栖息 地 在 它们 的 活动 区 域 里 正 逐 渐 消 失 。 可 以 预见 ， 
随 着 危地马拉 森林 面积 大 幅 减 小 ， 它 们 将 会 跟 很 多 其 他 物种 一 样 ， 陆 续 迁 从 到 萨尔瓦多 。 

雄 鸟 通常 在 二 月 开始 鸣 喝 ， 并 且 会 持续 几 个 月 。 与 此 同时 ， 峻 鸟 开始 在 地 面 用 松针 和 营 送 
筑 介 。 交 配 之 后 ， 峻 鸟 通常 会 产 下 2~4 枚 鸟 直 ， 并 钙化 约 16 天 。 随 后 锥 鸟 会 由 父母 哺育 
10~12 天 ， 之 后 锥 鸟 就 要 离开 鸟 梨 ， 学 会 独自 捕食 昆虫 。 

O"Reilly 封面 上 的 许多 动物 都 已 濒临 灭绝 ， 但 它们 的 存在 对 世界 至 关 重 要 。 想 要 了 解 如 何 


帮助 它们 ， 可 以 登录 animals.oreilly.com。 


本 书 封面 图 片 以 Wood 的 J1lustrated Natural History 一 书 中 的 黑白 版 画 为 基础 。 
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延 展 阅 读 


“一 “ CSS 一 姐 Lea Verou 作 品 ， 全 新 解答 网 页 设计 经 典 难 
本 。 《CSS 权 威 指南 》 作 者 Eric Meyer 倾 情 作 序 
CSS 揭 本 


全 新 解答 网 页 设计 经 
涵盖 7 大 主题 ， 



























LEA VEROU 要 


入 CSS 席 法 评 1 


et 书号 : 978-7-115-41694-0 

”定价 : 99.00 元 

。 Web 应 用 防火 墙 技 术 世 界 级 专家 实战 经 验 总 结 ， 阿 里 巴巴 一 线 技术 高 手 精准 演绎 
。 用 HTTPS 加 密 网 页 ， 让 用 户 数据 通信 更 安全 































































































SAULLI 


书号 : 978-7-115-43272-8 

定价 : 99.00 元 

。 精彩 呈现 500 多 个 实战 代码 示例 及 主流 浏览 器 实现 效果 医 
。 贴心 汇聚 HTML5 和 CSS3 中 所 有 属性 、 元 素 和 函数 的 简明 参考 表 


























HTML5 
权威 指南 


WANAA Ss 


FE 


书号 : 978-7-115-33836-5 
定价 : 129.00 元 








Ww 


。 一 幅 浓 墨 重 彩 的 语言 画卷 ， 一 部 推陈出新 的 技术 名 著 
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md LL 口 人 人 
前 端 架 构 设计 
前 端 架 构 是 一 系列 工具 和 流程 的 集合 ， 旨 在 提升 前 端 代码 质量 ， 并 实现 


高 效 、 可 持续 的 工作 流 。 对 于 大 型 Web 项 目 ， 前 端 架 构 师 和 软件 架构 师 
同样 不 可 或 缺 。 


本 书 作者 通过 Red Hat 公 司 真实 案例 分 析 以 及 以 往 经 验 积累 的 实用 技巧 ， 
系统 总 结 了 前 端 架构 的 四 个 核心 ， 详 细 展 示 了 新 的 前 端 开 发 准则 ， 将 
Web 开 发 提升 到 了 一 个 新 高 度 。 


前 端 架构 四 个 核心 : 

目 代码 一 一 如 何 实现 系统 架构 中 的 HTML、CSS 和 JavaScript 
流程 一 一 构建 高 效 并 且 防 止 出 错 的 工作 流 所 需要 的 工具 和 流程 
目 测试 一 一 为 网 站 搭建 稳固 基础 

目 文档 一 一 规划 好 系统 设计 蓝图 

前 端 架构 师 职责 : 

体系 设计 一 一 清晰 描绘 产品 和 代码 的 最 终 形态 

曙 工作 规划 一 一 制定 完整 开发 工作 流 

利 监督 跟 进 一 一 保证 项 目 高 效率 完成 





Micah Godbolt， 前 端 架 构 师 ， 作 家 ， 播 客 播 主 ， 世 界 级 开源 大 会 的 培训 
师 和 演讲 师 。 他 在 个 人 博客 (https://micahgodbolt.com) 中 经 常 大 力 推广 
前 端 架构 、Sass、 视 觉 还 原 测试 和 基于 模式 的 设计 方法 。 他 出 生 于 太平 洋 
西北 地 区 ， 目 前 和 妻子 以 及 两 个 孩子 定居 于 波 特 兰 的 郊区 。 


WEB DEVELOPMENT/DESIGN 


封面 设计 : Randy Comer 张 健 


图 灵 社 区 : iTuring.cn 
热线 : (010)51095186 转 600 


| 分 类 建议 | 计算 机 / Web 开 发 


人 民 邮 电 出 版 社 网 址 : Wwww.ptpress.com.cn 


OReilly Media, Inc. 授 权 人 民 邮 电 出 版 社 出 版 


此 简体 中 文 版 仅 限于 中 国 大 陆 (不 包含 中 国 香港 、 澳 门 特别 行政 区 和 中 国 合 湾 地 区 ) 销售 发 行 
This Authorized Edition for sale only in the territory of Peoples Republic of China (excluding 
Hong Kong, Macao and Taiwan) 











“前 端 架构 是 对 更 高 效 、 更 专业 


的 Web 开 发 方法 的 一 种 全 新 理 
解 ，Micah 重 新 定义 了 新 时 代 网 
站 建设 过 程 中 我 们 所 能 扮演 的 
角色 。” 

一 一 Christopher Schmitt 
Environments for Humans 会 议 主 席 
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看 完了 


如 果 您 对 本 书 内 容 有 疑问 ， 可 发 邮件 至 contact@turingbook.com， 会 有 编辑 
或 作 译 者 协助 答疑 。 也 可 访问 图 灵 社 区 ， 参 与 本 书 讨 论 。 


如 果 是 有 关 电 子 书 的 建议 或 问题 ， 请 联系 专用 客服 邮箱 : 


ebook@turingbook.com。 

在 这 可 以 找到 我 们 : 

微 博 @ 图 灵 教 育 : 好 书 、 活 动 每 日 播报 

微 博 @ 图 灵 社 区 : 电子 书 和 好 文章 的 消息 

微 博 @ 图 灵 新 知 : 图 灵 教 育 的 科普 小 组 

微 信 图 灵 访 谈 : ituring_interview， 讲 述 码 农 精彩 人 生 
微 信 图 灵 教 育 : turingbooks 
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